Toolbar in EJ2 JavaScript Gantt Chart Control

2 Feb 202624 minutes to read

The EJ2 JavaScript Gantt Chart control includes built-in toolbar support for executing common actions such as editing, searching, and navigating the timeline. The toolbar property accepts the collection of built-in toolbar items and ItemModel objects for custom toolbar items.

Built-in toolbar items allow you to perform standard operations directly from the Gantt interface. These items can be added to the toolbar by specifying the toolbar property as a collection of predefined items. Each toolbar item appears as a button with an associated icon and label for intuitive interaction.

The following table shows built-in toolbar items and its actions.

Built-in Toolbar Items	Actions
ExpandAll	Expands all the rows.
CollapseAll	Collapses all the rows.
Add	Adds a new record.
Edit	Edits the selected record.
Indent	Indent the selected record to one level.
Outdent	Outdents the selected record to one level.
Update	Updates the edited record.
Delete	Deletes the selected record.
Cancel	Cancels the edit state.
Search	Searches the records by the given key.
PrevTimeSpan	Navigate the Gantt timeline to previous time span.
NextTimeSpan	Navigate the Gantt timeline to Next time span.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add',  'Edit', 'Delete', 'Update', 'Cancel', 'CollapseAll',  'ExpandAll', 'NextTimeSpan', 'PrevTimeSpan', 'Search',  'Indent', 'Outdent'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    }
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

The toolbar has options to define both built-in and custom toolbar items.

You can modify built-in toolbar actions using the toolbarClick event. The following example disables the default functionality of the Add button, allowing you to override its behavior and display a custom message when it’s clicked.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add',  'Edit', 'Delete', 'Update', 'Cancel'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
    },
    toolbarClick: toolbarClick,
});
ganttChart.appendTo('#Gantt');

function toolbarClick (args) {
    if (args.item.id === 'Gantt_add') {
        args.cancel = true;
        const newRecord = {
            TaskID: Math.floor(Math.random() * 100000),
            TaskName: 'New Task',
            StartDate: new Date(),
            EndDate: new Date(),
            Duration: 1,
            Progress: 0
        };
        ganttChart.addRecord(newRecord);
        const messageElement = document.getElementById('message');
        if (messageElement) {
            messageElement.textContent = 'The default add action was cancelled. A new task was added using `addRecord()`.';
        }
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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 style="margin: 20px 0 10px 20px;">
                <p style="color: red;" id="message"></p>
            </div>
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

To show only icons in the built-in toolbar items, apply custom CSS to hide the text labels. Use the following style:

.e-gantt .e-toolbar .e-tbar-btn-text, 
.e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
  display: none;   
}

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Filter,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add',  'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
    }
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

You can customize the appearance of toolbar buttons in the Gantt component using CSS. Use the following class selectors to target the toolbar icons and buttons:

.e-gantt .e-toolbar .e-tbar-btn .e-icons,
.e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
  background: #add8e6;   
}

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Filter,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add',  'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
    }
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

To reposition the toolbar to the bottom of the Gantt chart, use the created event to manipulate the DOM. In this event, select the toolbar element and append it to the Gantt container using DOM manipulation. This moves the toolbar to the bottom of the layout.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Filter,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add',  'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
    },
    created:created
});
ganttChart.appendTo('#Gantt');

function created (){
    var toolbar = ganttChart.element.querySelector('.e-toolbar');
    ganttChart.element.appendChild(toolbar);
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

You can add custom items to the Gantt chart toolbar by setting the toolbar property with a collection of ItemModel objects. The actions associated with these custom toolbar items can be handled using the toolbarClick event.

By default, custom toolbar items are aligned to the left. However, you can change their position using the align property. In the example below, the Collapse All toolbar item is aligned to the right.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: [
        { text: 'Expand All', tooltipText: 'Expand All', prefixIcon: 'e-expand', id: 'expandall' },
        { text: 'Collapse All', tooltipText: 'Collapse All', prefixIcon: 'e-collapse-2', id: 'collapseall', align: 'Right' }
    ],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
    },
    toolbarClick: toolbarClick,
});
ganttChart.appendTo('#Gantt');

function toolbarClick (args) {
    if (args.item.id === 'expandall') {
        ganttChart.expandAll();
    }
    if (args.item.id === 'collapseall') {
        ganttChart.collapseAll();
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.

The Gantt component supports using both built-in and custom toolbar items simultaneously. In this example, ExpandAll and CollapseAll are built-in items, while Test and Schedule is a custom item added to the toolbar.

index.js
index.html
var clickHandler = function(args){
    if (args.item.text === 'Test') {
        const messageElement = document.getElementById('message');
        if (messageElement) {
            messageElement.textContent = 'Custom toolbar click';
        }
    }
};

ej.gantt.Gantt.Inject(ej.gantt.Filter,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height:'450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbarClick: clickHandler,
    toolbar: ['ExpandAll', 'CollapseAll', { text: 'Test', tooltipText: 'Test',id: 'Test' }]
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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>
                <p id="message"></p>
            </div>
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

You can control toolbar items dynamically using the enableItems method. This allows you to enable or disable specific items based on user actions or application state.

index.js
index.html
var clickHandler = function(args){
    if (args.item.id === 'QuickFilter') {
        ganttChart.filterByColumn('TaskName', 'startswith', 'Identify');
    }
    if (args.item.id === 'ClearFilter') {
        ganttChart.clearFiltering();
    }
};

ej.gantt.Gantt.Inject(ej.gantt.Filter,ej.gantt.Toolbar);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height:'450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbarClick: clickHandler,
    toolbar: [
        { text: 'Quick Filter', id: 'QuickFilter' }, 
        { text: 'Clear Filter', id: 'ClearFilter' }
    ],
    allowFiltering:true
});
ganttChart.appendTo('#Gantt');

let switchObj = new ej.buttons.Switch({
    checked: true,
    change: (args) => {
        const enable = args.checked;
        // Enable or disable both custom toolbar items.
        ganttChart.toolbarModule.enableItems(['QuickFilter', 'ClearFilter'], enable);
    }
});

switchObj.appendTo('#switch');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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 style="margin-bottom: 20px; padding-left: 20px;">
                <label style="margin-right: 10px; font-weight: bold;">Enable or disable toolbar items</label>
                <input type="checkbox" id="switch" />
            </div>
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

You can enhance the Gantt toolbar component by adding editor elements such as numeric text boxes, drop-down lists, and date pickers. These input controls improve user interaction by enabling filtering, searching, and other dynamic actions.

The following example demonstrates how to integrate an AutoComplete compoenent into the toolbar.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.Filter);

const dropDownData = [
    'ClearFilter',
    'Project Kickoff', 'Site Selection', 'Soil Analysis',
    'Approval of Soil Report', 'Cost Estimation',
    'Create Floor Plan', 'Material Listing', 'Approval of Estimate'
];

let autoComplete = new ej.dropdowns.AutoComplete({
    dataSource: dropDownData,
    placeholder: 'Search TaskName',
    change: (args) => {
        const selectedValue = args.value;
        if (args.itemData && selectedValue !== 'ClearFilter') {
            // Filter when a valid task name is selected (exclude ClearFilter).
            ganttChart.treeGrid.grid.filterByColumn('TaskName', 'equal', selectedValue);
        } else {
            // Clear filter when input is cleared or "ClearFilter" is selected/typed.
            ganttChart.clearFiltering();
        }
    }
});

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '420px',
    allowFiltering: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },    
    toolbar: [
        {
            type: 'Input',
            template: autoComplete,
            align: 'Left',
            tooltipText: 'Search TaskName'
        }
    ]
});

ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.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="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
                ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Toolbar in EJ2 JavaScript Gantt Chart Control

Built-in toolbar items

Customize the built-in toolbar items

Show only icons in built-in toolbar items

Customize toolbar buttons using CSS

Add toolbar at the bottom of gantt

Custom toolbar items

Built-in and custom items in toolbar

Enable/disable toolbar items

Add input elements to toolbar