Toolbar in React Gantt Chart Component

31 Jan 202624 minutes to read

The React Gantt Chart component 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.

To enable toolbar functionality, inject the Toolbar in the service array.

Built-in 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. 
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'ExpandAll', 'CollapseAll', 'PrevTimeSpan',
    'NextTimeSpan', 'Indent', 'Outdent'
  ];

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      editSettings={editSettings}
      toolbar={toolbar}>
      <Inject services={[Edit, Toolbar, Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, Selection, TaskFieldsModel, EditSettingsModel, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar: ToolbarItem[] = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'ExpandAll', 'CollapseAll', 'PrevTimeSpan',
    'NextTimeSpan', 'Indent', 'Outdent'
  ];

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      editSettings={editSettings}
      toolbar={toolbar}>
      <Inject services={[Edit, Toolbar, Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

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

Customize the built-in 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.

You can check this video to learn about how to use custom toolbar in Gantt.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance = null;
  let message = '';

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  const toolbarClick = (args) => {
    console.log(args.item.id);
    if (args.item.id === 'ganttDefault_add') {
      args.cancel = true;
      const newRecord = {
        TaskID: Math.floor(Math.random() * 100),
        TaskName: 'New Task',
        StartDate: new Date(),
        EndDate: new Date(),
        Duration: 1,
        Progress: 0
      };
      if (ganttInstance) {
        ganttInstance.addRecord(newRecord);
      }
      message = 'The default add action was cancelled. A new task was added using `addRecord()`.';
      const msgElement = document.getElementById('message');
      if (msgElement) {
        msgElement.textContent = message;
      }
    }
  };

  return (
    <div>
      <div style=>
        <p style= id="message">{message}</p>
      </div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        toolbarClick={toolbarClick}
        ref={(gantt) => (ganttInstance = gantt)}>
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
  TaskFieldsModel,
  EditSettingsModel,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;
  let message = '';

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar: ToolbarItem[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  const toolbarClick = (args: ClickEventArgs): void => {
    console.log(args.item.id);
    if (args.item.id === 'ganttDefault_add') {
      args.cancel = true;
      const newRecord = {
        TaskID: Math.floor(Math.random() * 100),
        TaskName: 'New Task',
        StartDate: new Date(),
        EndDate: new Date(),
        Duration: 1,
        Progress: 0
      };
      if (ganttInstance) {
        ganttInstance.addRecord(newRecord);
      }
      message = 'The default add action was cancelled. A new task was added using `addRecord()`.';
      const msgElement = document.getElementById('message');
      if (msgElement) {
        msgElement.textContent = message;
      }
    }
  };

  return (
    <div>
      <div style=>
        <p style= id="message">{message}</p>
      </div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        toolbarClick={toolbarClick}
        ref={(gantt) => (ganttInstance = gantt)}>
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
.e-quickfilter::before {
    content: '\e7ee';
}
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Show only icons in built-in toolbar items

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;   
  }
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance = null;

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'];

  return (
    <div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        ref={(gantt) => (ganttInstance = gantt)}>
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
  TaskFieldsModel,
  EditSettingsModel,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar: ToolbarItem[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'];

  return (
    <div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        ref={(gantt) => (ganttInstance = gantt)}>
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .e-gantt .e-toolbar .e-tbar-btn-text,
        .e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
            display: none;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Customize toolbar buttons using CSS

You can customize the appearance of toolbar buttons in the Gantt Chart 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;   
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance = null;

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'];

  return (
    <div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        ref={(gantt) => (ganttInstance = gantt)}>
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
  TaskFieldsModel,
  EditSettingsModel,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar: ToolbarItem[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'];

  return (
    <div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        ref={(gantt) => (ganttInstance = gantt)}>
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .e-gantt .e-toolbar .e-tbar-btn .e-icons,
        .e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
            background: #add8e6;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Add toolbar at the bottom of gantt

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance = null;

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'ExpandAll', 'CollapseAll'
  ];

  const created = () => {
    const toolbarElement = ganttInstance.element.querySelector('.e-toolbar');
    if (toolbarElement && ganttInstance.element) {
      ganttInstance.element.appendChild(toolbarElement);
    }
  };

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      editSettings={editSettings}
      toolbar={toolbar}
      created={created}
      ref={(gantt) => (ganttInstance = gantt)}>
      <Inject services={[Edit, Toolbar, Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Toolbar,
  Selection,
  TaskFieldsModel,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';

import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const toolbar: ToolbarItem[] = [
    { 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' }
  ];

  const toolbarClick = (args: ClickEventArgs): void => {
    if (args.item.id === 'expandall' && ganttInstance) {
      ganttInstance.expandAll();
    }
    if (args.item.id === 'collapseall' && ganttInstance) {
      ganttInstance.collapseAll();
    }
  };

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      toolbar={toolbar}
      toolbarClick={toolbarClick}
      ref={(gantt) => (ganttInstance = gantt)}
    >
      <Inject services={[Toolbar, Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Custom toolbar items

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Toolbar,
  Selection,
} from '@syncfusion/ej2-react-gantt';

import { data } from './datasource';

function App() {
  let ganttInstance = null;

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const 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' }
  ];

  const toolbarClick = (args) => {
    if (args.item.id === 'expandall' && ganttInstance) {
      ganttInstance.expandAll();
    }
    if (args.item.id === 'collapseall' && ganttInstance) {
      ganttInstance.collapseAll();
    }
  };

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      toolbar={toolbar}
      toolbarClick={toolbarClick}
      ref={(gantt) => (ganttInstance = gantt)}
    >
      <Inject services={[Toolbar, Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Toolbar,
  Selection,
  TaskFieldsModel,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';

import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const toolbar: ToolbarItem[] = [
    { 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' }
  ];

  const toolbarClick = (args: ClickEventArgs): void => {
    if (args.item.id === 'expandall' && ganttInstance) {
      ganttInstance.expandAll();
    }
    if (args.item.id === 'collapseall' && ganttInstance) {
      ganttInstance.collapseAll();
    }
  };

  return (
    <GanttComponent
      height="430px"
      dataSource={data}
      taskFields={taskSettings}
      toolbar={toolbar}
      toolbarClick={toolbarClick}
      ref={(gantt) => (ganttInstance = gantt)}
    >
      <Inject services={[Toolbar, Selection]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

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

Built-in and custom items in toolbar

The Gantt Chart 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Toolbar,
  Selection,
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance = null;
  let message = '';

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const toolbar = [
    'ExpandAll',
    'CollapseAll',
    { text: 'Test', tooltipText: 'Click', id: 'Click' }
  ];

  const toolbarClick = (args) => {
    if (!ganttInstance) return;

    if (args.item.id === 'ExpandAll') {
      ganttInstance.expandAll();
    }
    if (args.item.id === 'CollapseAll') {
      ganttInstance.collapseAll();
    }
    if (args.item.id === 'Click') {
      message = 'Custom Toolbar Clicked';
      const msg = document.getElementById('message');
      if (msg) msg.textContent = message;
    }
  };

  return (
    <div>
      <div style=>
        <p id="message" style=>
          {message}
        </p>
      </div>

      <GanttComponent
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        toolbar={toolbar}
        toolbarClick={toolbarClick}
        ref={(gantt) => (ganttInstance = gantt)}
      >
        <Inject services={[Toolbar, Selection]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  Inject,
  Toolbar,
  Selection,
  TaskFieldsModel,
  ToolbarItem
} from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;
  let message: string = '';

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const toolbar: ToolbarItem[] = [
    'ExpandAll',
    'CollapseAll',
    { text: 'Test', tooltipText: 'Click', id: 'Click' }
  ];

  const toolbarClick = (args: ClickEventArgs): void => {
    if (!ganttInstance) return;

    if (args.item.id === 'ExpandAll') {
      ganttInstance.expandAll();
    }
    if (args.item.id === 'CollapseAll') {
      ganttInstance.collapseAll();
    }
    if (args.item.id === 'Click') {
      message = 'Custom Toolbar Clicked';
      const msg = document.getElementById('message');
      if (msg) msg.textContent = message;
    }
  };

  return (
    <div>
      <div style=>
        <p id="message" style=>
          {message}
        </p>
      </div>

      <GanttComponent
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        toolbar={toolbar}
        toolbarClick={toolbarClick}
        ref={(gantt) => (ganttInstance = gantt)}
      >
        <Inject services={[Toolbar, Selection]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Enable/disable toolbar items

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
} from '@syncfusion/ej2-react-gantt';

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';

import { data } from './datasource';

function App() {
  let ganttInstance = null;
  let message = '';

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar = [
    { text: 'Quick Filter', id: 'QuickFilter' },
    { text: 'Clear Filter', id: 'ClearFilter' }
  ];

  const toolbarClick = (args) => {
    if (!ganttInstance) return;

    if (args.item.id === 'QuickFilter') {
      ganttInstance.filterByColumn('TaskName', 'startswith', 'Approval');
      message = 'Filtered rows starting with "Approval".';
      document.getElementById('message').textContent = message;
    }

    if (args.item.id === 'ClearFilter') {
      ganttInstance.clearFiltering();
      message = 'Filters cleared.';
      document.getElementById('message').textContent = message;
    }
  };

  const onSwitchChange = (args)=> {
    if (!ganttInstance) return;
    const enable = args.checked;
    ganttInstance.toolbarModule.enableItems(['QuickFilter', 'ClearFilter'], enable);
    message = enable ? 'Toolbar items enabled.' : 'Toolbar items disabled.';
    document.getElementById('message').textContent = message;
  };

  return (
    <div>
      <div style=>
        <label style=>
          Enable or disable toolbar items
        </label>
        <SwitchComponent checked={true} change={onSwitchChange} />
      </div>

      <p id="message" style=>{message}</p>
      <GanttComponent
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        allowFiltering={true}
        editSettings={editSettings}
        toolbar={toolbar}
        toolbarClick={toolbarClick}
        ref={(gantt) => (ganttInstance = gantt)}
      >
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
  GanttComponent,
  Inject,
  Edit,
  Toolbar,
  Selection,
  Filter,
  TaskFieldsModel,
  ToolbarItem,
  EditSettingsModel
} from '@syncfusion/ej2-react-gantt';

import { SwitchComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;
  let message = '';

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };

  const toolbar: ToolbarItem[] = [
    { text: 'Quick Filter', id: 'QuickFilter' },
    { text: 'Clear Filter', id: 'ClearFilter' }
  ];

  const toolbarClick = (args: ClickEventArgs): void => {
    if (!ganttInstance) return;

    if (args.item.id === 'QuickFilter') {
      ganttInstance.filterByColumn('TaskName', 'startswith', 'Approval');

      message = 'Filtered rows starting with "Approval".';
      document.getElementById('message')!.textContent = message;
    }

    if (args.item.id === 'ClearFilter') {
      ganttInstance.clearFiltering();

      message = 'Filters cleared.';
      document.getElementById('message')!.textContent = message;
    }
  };

  const onSwitchChange = (args: ChangeEventArgs): void => {
    if (!ganttInstance) return;

    const enable = args.checked as boolean;

    ganttInstance.toolbarModule.enableItems(['QuickFilter', 'ClearFilter'], enable);

    message = enable ? 'Toolbar items enabled.' : 'Toolbar items disabled.';
    document.getElementById('message')!.textContent = message;
  };

  return (
    <div>
      <div style=>
        <label style=>
          Enable or disable toolbar items
        </label>
        <SwitchComponent checked={true} change={onSwitchChange} />
      </div>

      <p
        id="message"
        style=
      >
        {message}
      </p>

      <GanttComponent
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        allowFiltering={true}
        editSettings={editSettings}
        toolbar={toolbar}
        toolbarClick={toolbarClick}
        ref={(gantt) => (ganttInstance = gantt)}
      >
        <Inject services={[Edit, Toolbar, Selection, Filter]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Add input elements in Toolbar

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Filter, Selection } from '@syncfusion/ej2-react-gantt';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { data } from './datasource';

function App() {
  let ganttInstance = null;
  let autoInstance = null;

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

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

  const onChange = (args) => {
    const selected = args.value;
    if (!ganttInstance) return;

    if (args.itemData) {
      ganttInstance.filterByColumn('TaskName', 'equal', selected);
    } else {
      ganttInstance.clearFiltering();
    }
  };

  return (
    <div>
      <ToolbarComponent>
        <ItemsDirective>
          <ItemDirective
            align="Left"
            template={() => (
              <AutoCompleteComponent
                placeholder="Search TaskName"
                dataSource={dropDownData}
                change={onChange}
                ref={(ac) => (autoInstance = ac)}
              />
            )}
          />
        </ItemsDirective>
      </ToolbarComponent>

      <GanttComponent
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        allowFiltering={true}
        ref={(g) => (ganttInstance = g)}
      >
        <Inject services={[Toolbar, Filter, Selection]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Filter, Selection, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { AutoCompleteComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null = null;
  let autoInstance: AutoCompleteComponent | null = null;

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    endDate: 'EndDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

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

  const onChange = (args: ChangeEventArgs): void => {
    const selected = args.value as string;
    if (!ganttInstance) return;

    if (args.itemData) {
      ganttInstance.filterByColumn('TaskName', 'equal', selected);
    } else {
      ganttInstance.clearFiltering();
    }
  };

  return (
    <div>
      <ToolbarComponent>
        <ItemsDirective>
          <ItemDirective
            align="Left"
            template={() => (
              <AutoCompleteComponent
                placeholder="Search TaskName"
                dataSource={dropDownData}
                change={onChange}
                ref={(ac) => (autoInstance = ac)}
              />
            )}
          />
        </ItemsDirective>
      </ToolbarComponent>

      <GanttComponent
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        allowFiltering={true}
        ref={(g) => (ganttInstance = g)}
      >
        <Inject services={[Toolbar, Filter, Selection]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>