Toolbar in Angular Gantt component
27 Apr 202424 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.
To use toolbar feature, inject the ToolbarService
in the provider section of AppModule
.
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 |
---|---|
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 | Outdent the elected 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { EditService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';
@Component({
imports: [
GanttModule
],
providers: [EditService, SelectionService, ToolbarService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public editSettings?: EditSettingsModel;
public toolbar?: ToolbarItem[];
public ngOnInit(): void {
this.data = projectNewData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll','PrevTimeSpan','NextTimeSpan','Indent','Outdent'];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- 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.
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { FilterService, ToolbarService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './data';
@Component({
imports: [
GanttModule
],
providers: [FilterService, ToolbarService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" allowFiltering='true' [columns]="columns" (toolbarClick)="toolbarClick($event)"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public toolbar?: any;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.toolbar = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', prefixIcon: 'e-quickfilter', align:'Right'}];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'toolbarfilter') {
this.ganttObj.filterByColumn('TaskName', 'startswith', 'Identify');
}
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { FilterService, ToolbarService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './data';
@Component({
imports: [
GanttModule
],
providers: [FilterService, ToolbarService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" [columns]="columns" (toolbarClick)="toolbarClick($event)"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public toolbar?: any;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.toolbar = ['ExpandAll', 'CollapseAll', { text: 'Click', tooltipText: 'Click',id: 'Click' } ];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Click') {
alert("Custom toolbar click...");
}
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Enable/disable toolbar items
You can enable or disable the toolbar items by using the enableItems
method.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { FilterService, ToolbarService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { editingData } from './data';
@Component({
imports: [
GanttModule
],
providers: [FilterService, ToolbarService],
standalone: true,
selector: 'app-root',
template:
`<button ejs-button id='enabletoolbar' (click)='enable()'>Enable</button>
<button ejs-button id='disabletoolbar' (click)='disable()'>Disable</button>
<br><br>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" [allowFiltering]='true'></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public toolbar?: any;
@ViewChild('gantt', {static: true})
public ganttObj?: GanttComponent| any;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.toolbar = [{ text: 'QuickFilter', id: 'QuickFilter' }, { text: 'ClearFilter', id: 'ClearFilter'}];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'QuickFilter') {
this.ganttObj.filterByColumn('TaskName', 'startswith', 'Identify');
}
if (args.item.text === 'ClearFilter') {
this.ganttObj.clearFiltering();
}
};
enable(): void {
this.ganttObj.toolbarModule.enableItems(['QuickFilter', 'ClearFilter'], true);// enable toolbar items.
}
disable(): void {
this.ganttObj.toolbarModule.enableItems(['QuickFilter', 'ClearFilter'], false);// disable toolbar items.
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Add input elements in toolbar
In the Gantt toolbar, you can add EJ2 editor elements like numeric text box, drop-down list, and date picker controls. The following code snippets demonstrates how to add EJ2 editors to the Gantt toolbar.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { ToolbarService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import {Toolbar} from '@syncfusion/ej2-navigations';
import { NumericTextBox} from '@syncfusion/ej2-inputs';
import { ToolbarItem } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [
GanttModule, ToolbarModule
],
providers: [ToolbarService],
standalone: true,
selector: 'app-root',
template:
`
<ejs-toolbar (created)="onCreate($event)">
<e-items>
<e-item template=' <input id="numeric" type="text" />' type = 'Input'></e-item>
</e-items>
</ejs-toolbar>
<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data?: object[];
public taskSettings?: object;
public templateEle: any = new NumericTextBox({ format: 'c2', value: 1, width: 150 });
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
}
public onCreate (e: any) {
this.templateEle.appendTo('#numeric');
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));