Enable or disable toolbar item in EJ2 JavaScript Toolbar control

2 May 20238 minutes to read
The disabled property of the Toolbar item is used to enable/disable the item by setting false/true value to the property. In the following code example initially paste action will be disabled. On clicking the cut or copy button, the paste button will be enabled.
index.js
index.html
//Initialize Toolbar component
var toolbar = new ej.navigations.Toolbar({
    width: 600,   
     items: [
            {
                prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut', click: onClick },
            {
                prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy', click: onClick },
            {
                prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste', disabled: true },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold' },
            {
                prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline'},
            {
                prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic' },
            {
                prefixIcon: 'e-color-icon tb-icons', tooltipText: 'Color-Picker' },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-alignleft-icon tb-icons', tooltipText: 'Align-Left' },
            {
                prefixIcon: 'e-alignjustify-icon tb-icons', tooltipText: 'Align-Justify'},
            {
                prefixIcon: 'e-alignright-icon tb-icons', tooltipText: 'Align-Right' },
            {
                prefixIcon: 'e-aligncenter-icon tb-icons', tooltipText: 'Align-Center' },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-bullets-icon tb-icons', tooltipText: 'Bullets'},
            {
                prefixIcon: 'e-numbering-icon tb-icons', tooltipText: 'Numbering' },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-ascending-icon tb-icons', tooltipText: 'Sort A - Z' },
            {
                prefixIcon: 'e-descending-icon tb-icons', tooltipText: 'Sort Z - A' },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-upload-icon tb-icons', tooltipText: 'Upload' },
            {
                prefixIcon: 'e-download-icon tb-icons', tooltipText: 'Download' },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-indent-icon tb-icons', tooltipText: 'Text Indent' },
            {
                prefixIcon: 'e-outdent-icon tb-icons', tooltipText: 'Text Outdent' },
            {
                type: 'Separator' },
            {
                prefixIcon: 'e-clear-icon tb-icons', tooltipText: 'Clear' },
            {
                prefixIcon: 'e-reload-icon tb-icons', tooltipText: 'Reload' },
            {
                prefixIcon: 'e-export-icon tb-icons', tooltipText: 'Export'
            }]
});

//Render initialized Toolbar component
toolbar.appendTo('#element');

function onClick() {
  toolbar.items[2].disabled = false;
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/material.css" rel="stylesheet">
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>