Toolbar in React Gantt component

React

Search results

20 Jan 2022 / 6 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 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.

Source

Preview

index.tsx

index.html

App.jsx

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';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public editOptions: EditSettingsModel = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
  };
  public toolbarOptions: ToolbarItem[] = ['Add','Edit','Delete','Cancel','Update','PrevTimeSpan','NextTimeSpan','ExpandAll','CollapseAll','Search','Indent','Outdent'];
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSelection={true}
        editSettings={this.editOptions} toolbar={this.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/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>
</head>

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

</html>

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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editOptions = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true
        };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'PrevTimeSpan', 'NextTimeSpan', 'ExpandAll', 'CollapseAll', 'Search', 'Indent', 'Outdent'];
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSelection={true} editSettings={this.editOptions} toolbar={this.toolbarOptions} height='450px'>
           <Inject services={[Edit, Selection, Toolbar, Filter]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

The toolbar has options to define both built-in and 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.

Source

Preview

index.tsx

index.html

App.jsx

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';
class App extends React.Component<{}, {}>{
    private ganttInstance: any;
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public toolbarOptions: any[] = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right', prefixIcon: 'e-quickfilter' }];
  public toolbarClick(): void {
              this.ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
        };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}
        allowFiltering={true}  toolbar={this.toolbarOptions} toolbarClick={this.toolbarClick.bind(this)} height = '450px' ref={gantt => this.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/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>
</head>

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

</html>

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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.toolbarOptions = [{ text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align: 'Right', prefixIcon: 'e-quickfilter' }];
    }
    toolbarClick() {
        this.ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
    }
    ;
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowFiltering={true} toolbar={this.toolbarOptions} toolbarClick={this.toolbarClick.bind(this)} height='450px' ref={gantt => this.ganttInstance = gantt}>
         <Inject services={[Filter, Toolbar]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

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.

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.

Source

Preview

index.tsx

index.html

App.jsx

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';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
    dependency: 'Predecessor',
  };
  public toolbarOptions: any[] = ['ExpandAll', 'CollapseAll', { text: 'Test', tooltipText: 'Test',id: 'Test' }];
  public toolbarClick(args: ClickEventArgs): void {
       if (args.item.text === 'Test') {
        alert("Custom toolbar Click...");
      }
    };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}  
        toolbar={this.toolbarOptions} toolbarClick={this.toolbarClick.bind(this)} 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/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>
</head>

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

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            dependency: 'Predecessor',
        };
        this.toolbarOptions = ['ExpandAll', 'CollapseAll', { text: 'Test', tooltipText: 'Test', id: 'Test' }];
    }
    toolbarClick(args) {
        if (args.item.text === 'Test') {
            alert("Custom toolbar Click...");
        }
    }
    ;
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} toolbar={this.toolbarOptions} toolbarClick={this.toolbarClick.bind(this)} height='450px'>
            <Inject services={[Toolbar]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

You can enable or disable the toolbar items by using the enableItems method.

Source

Preview

index.tsx

index.html

App.jsx

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';
class App extends React.Component<{}, {}>{
    private ganttInstance: any;
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public toolbarOptions: any[] = ['QuickFilter', 'ClearFilter'];
  public enable() {
      this.ganttInstance.toolbarModule.enableItems([this.ganttInstance.element.id + '_QuickFilter', this.ganttInstance.element.id + '_ClearFilter'], true);// enable toolbar items.
   };
   public disable() {
      this.ganttInstance.toolbarModule.enableItems([this.ganttInstance.element.id + '_QuickFilter', this.ganttInstance.element.id + '_ClearFilter'], false);// disable toolbar items.
    };
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.text === 'QuickFilter') {
           this.ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
        }
        if (args.item.text === 'ClearFilter') {
           this.ganttInstance.clearFiltering();
        }
    };

    render() {
        return (<div>
        <ButtonComponent  onClick= { this.enable.bind(this)}>Enable</ButtonComponent>
        <ButtonComponent  onClick= { this.disable.bind(this)}>Disable</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={this.taskFields} toolbar={this.toolbarOptions}
         toolbarClick={this.toolbarClick.bind(this)} allowFiltering={true} height = '450px'
         ref={gantt => this.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/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>
</head>

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

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Toolbar, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.toolbarOptions = ['QuickFilter', 'ClearFilter'];
    }
    enable() {
        this.ganttInstance.toolbarModule.enableItems([this.ganttInstance.element.id + '_QuickFilter', this.ganttInstance.element.id + '_ClearFilter'], true); // enable toolbar items.
    }
    ;
    disable() {
        this.ganttInstance.toolbarModule.enableItems([this.ganttInstance.element.id + '_QuickFilter', this.ganttInstance.element.id + '_ClearFilter'], false); // disable toolbar items.
    }
    ;
    toolbarClick(args) {
        if (args.item.text === 'QuickFilter') {
            this.ganttInstance.filterByColumn('TaskName', 'startswith', 'Identify');
        }
        if (args.item.text === 'ClearFilter') {
            this.ganttInstance.clearFiltering();
        }
    }
    ;
    render() {
        return (<div>
        <ButtonComponent onClick={this.enable.bind(this)}>Enable</ButtonComponent>
        <ButtonComponent onClick={this.disable.bind(this)}>Disable</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={this.taskFields} toolbar={this.toolbarOptions} toolbarClick={this.toolbarClick.bind(this)} allowFiltering={true} height='450px' ref={gantt => this.ganttInstance = gantt}>
            <Inject services={[Toolbar, Filter]}/>
        </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

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.

Source

Preview

index.tsx

index.html

App.jsx

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';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public toolbarOptions: any[] = [ { type: 'Input',template:new NumericTextBox({ format: 'c2', value:1 })} ];
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}  
        toolbar={this.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/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>
</head>

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

</html>

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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.toolbarOptions = [{ type: 'Input', template: new NumericTextBox({ format: 'c2', value: 1 }) }];
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} toolbar={this.toolbarOptions} height='400px'>
            <Inject services={[Toolbar]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

Contents

Built-in toolbar items
Custom toolbar items
Built-in and custom items in toolbar
Enabledisable toolbar items
Add input elements in Toolbar

Contents

Built-in toolbar items
Custom toolbar items
Built-in and custom items in toolbar
Enabledisable toolbar items
Add input elements in Toolbar

Toolbar in React Gantt component

Built-in toolbar items

Custom toolbar items

Built-in and custom items in toolbar

Enable/disable toolbar items

Add input elements in Toolbar