Tool bar in React Gantt component
2 Feb 202324 minutes to read
The Gantt component provides the toolbar support to handle Gantt actions. The toolbar
property accepts the collection of built-in toolbar items and ItemModel
objects for custom toolbar items.
Built-in toolbar items
Built-in toolbar items execute standard actions of the Gantt component, and these items can be added to toolbar by defining the toolbar
as a collection of built-in items. It renders the button with icon and text.
The following table shows built-in toolbar items and its actions.
Built-in Toolbar Items | Actions |
---|---|
Add | Adds a new record. |
Cancel | Cancels the edit state. |
CollapseAll | Collapses all the rows. |
Delete | Deletes the selected record. |
Edit | Edits the selected record. |
Indent | Indent the selected record to one level. |
Outdent | Outdent the elected record to one level. |
ExpandAll | Expands all the rows. |
NextTimeSpan | Navigate the Gantt timeline to next time span. |
PrevTimeSpan | Navigate the Gantt timeline to previous time span. |
Search | Searches the records by the given key. |
Update | Updates the edited record. |
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Filter, Selection, Toolbar }from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions = ['Add','Edit','Delete','Cancel','Update','PrevTimeSpan','NextTimeSpan','ExpandAll','CollapseAll','Search','Indent','Outdent'];
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} toolbar={toolbarOptions} height = '450px'>
<Inject services={[Edit, Selection, Toolbar, Filter]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Filter, EditSettingsModel, Selection, Toolbar, ToolbarItem }from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
const toolbarOptions: ToolbarItem[] = ['Add','Edit','Delete','Cancel','Update','PrevTimeSpan','NextTimeSpan','ExpandAll','CollapseAll','Search','Indent','Outdent'];
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} toolbar={toolbarOptions} height = '450px'>
<Inject services={[Edit, Selection, Toolbar, Filter]} />
</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/27.1.48/material.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.
Custom toolbar items
Custom toolbar items can be added to the toolbar by defining the toolbar
property as a collection of ItemModels
.
Actions for this customized toolbar items are defined in the toolbarClick
event.
You can check this video to learn about how to use custom toolbar in Gantt.
By default, the custom toolbar items are at left position. You can change the position by using the align
property. In the following sample, the Quick Filter
toolbar item is positioned at right.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right', prefixIcon: 'e-quickfilter' }];
function toolbarClick(){
ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} toolbar={toolbarOptions} toolbarClick={toolbarClick.bind(this)} height = '450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: any[] = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right', prefixIcon: 'e-quickfilter' }];
function toolbarClick(): void {
ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} toolbar={toolbarOptions} toolbarClick={toolbarClick.bind(this)} height = '450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Filter, Toolbar]} />
</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/27.1.48/material.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>
- The
toolbar
has options to define both built-in and custom toolbar items.- 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 component has an option to use both built-in and custom toolbar items at the same time.
In the following example, the ExpandAll
and CollapseAll
are built-in toolbar items and Test
is the custom toolbar item.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
dependency: 'Predecessor',
};
const toolbarOptions = ['ExpandAll', 'CollapseAll', { text: 'Test', tooltipText: 'Test',id: 'Test' }];
function toolbarClick(args) {
if (args.item.text === 'Test') {
alert("Custom toolbar Click...");
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions} toolbarClick={toolbarClick} height = '450px'>
<Inject services={[Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
dependency: 'Predecessor',
};
const toolbarOptions: any[] = ['ExpandAll', 'CollapseAll', { text: 'Test', tooltipText: 'Test',id: 'Test' }];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Test') {
alert("Custom toolbar Click...");
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions} toolbarClick={toolbarClick} height = '450px'>
<Inject services={[Toolbar]} />
</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/27.1.48/material.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 enable or disable the toolbar items by using the enableItems
method.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, Filter, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['QuickFilter', 'ClearFilter'];
function enable() {
ganttInstance.toolbarModule.enableItems([ganttInstance.element.id + '_QuickFilter', ganttInstance.element.id + '_ClearFilter'], true);// enable toolbar items.
};
function disable() {
ganttInstance.toolbarModule.enableItems([ganttInstance.element.id + '_QuickFilter', ganttInstance.element.id + '_ClearFilter'], false);// disable toolbar items.
};
function toolbarClick(args){
if (args.item.text === 'QuickFilter') {
ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
}
if (args.item.text === 'ClearFilter') {
ganttInstance.clearFiltering();
}
};
return (<div>
<ButtonComponent onClick= {enable}>Enable</ButtonComponent>
<ButtonComponent onClick= { disable}>Disable</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowFiltering={true} height = '450px'
ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar, Filter]} />
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, Inject, Toolbar, Filter, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: any[] = ['QuickFilter', 'ClearFilter'];
function enable() {
ganttInstance.toolbarModule.enableItems([ganttInstance.element.id + '_QuickFilter', ganttInstance.element.id + '_ClearFilter'], true);// enable toolbar items.
};
function disable() {
ganttInstance.toolbarModule.enableItems([ganttInstance.element.id + '_QuickFilter', ganttInstance.element.id + '_ClearFilter'], false);// disable toolbar items.
};
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'QuickFilter') {
ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
}
if (args.item.text === 'ClearFilter') {
ganttInstance.clearFiltering();
}
};
return (<div>
<ButtonComponent onClick= {enable}>Enable</ButtonComponent>
<ButtonComponent onClick= { disable}>Disable</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields} toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowFiltering={true} height = '450px'
ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar, 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/27.1.48/material.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
In Gantt toolbar, it is possible to add EJ2 editor elements like numeric text box, dropdown list and date picker components. The following code snippets explains how to add EJ2 editors in Gantt toolbar.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { NumericTextBox} from '@syncfusion/ej2-inputs';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = [ { type: 'Input',template:new NumericTextBox({ format: 'c2', value:1 })} ];
return <GanttComponent dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions} height = '400px'>
<Inject services={[Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { NumericTextBox} from '@syncfusion/ej2-inputs';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: any[] = [ { type: 'Input',template:new NumericTextBox({ format: 'c2', value:1 })} ];
return <GanttComponent dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions} height = '400px'>
<Inject services={[Toolbar]} />
</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/27.1.48/material.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>