Toolbar in Angular Gantt component

18 Oct 202524 minutes to read

The Angular Gantt 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 ToolbarService in the providers of the component.

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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { EditService, ToolbarService, SelectionService, ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule],
  providers: [EditService, ToolbarService, SelectionService],
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public editSettings: EditSettingsModel = {};
  public toolbar: ToolbarItem[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    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.

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.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GanttModule, GanttComponent, EditService, ToolbarService, SelectionService, FilterService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule],
  providers: [EditService, ToolbarService, FilterService, SelectionService],
  template: `
    <div style="margin: 20px 0 10px 20px;">
      <p style="color: red;" id="message"></p>
    </div>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings"
    [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public editSettings: EditSettingsModel = {};
  public toolbar: string[] = [];
  public message?: string;

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Gantt_add') {
      args.cancel = true;
      const newRecord = {
        TaskID: Math.floor(Math.random() * 100000),
        TaskName: 'New Task',
        StartDate: new Date(),
        EndDate: new Date(),
        Duration: 1,
        Progress: 0
      };
      this.ganttInstance?.addRecord(newRecord);
      this.message = 'The default add action was cancelled. A new task was added using `addRecord()`.';
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { EditService, ToolbarService, SelectionService, ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule],
  providers: [EditService, ToolbarService, SelectionService],
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar">
    </ejs-gantt>`,
  styles: [`
    .e-gantt .e-toolbar .e-tbar-btn-text, 
    .e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
       display: none;   
    }
  `],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public editSettings: EditSettingsModel = {};
  public toolbar: ToolbarItem[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
    };
    this.toolbar = [
      'Add', 'Edit', 'Delete', 'Update', 'Cancel',
      'ExpandAll', 'CollapseAll'
    ];
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize toolbar buttons using CSS

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

.e-gantt .e-toolbar .e-tbar-btn .e-icons,
.e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
  background: #add8e6;   
}
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule, EditService, ToolbarService, SelectionService, ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule],
  providers: [EditService, ToolbarService, SelectionService],
  template: `
    <ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar">
    </ejs-gantt>`,
  styles: [`
    .e-gantt .e-toolbar .e-tbar-btn .e-icons,
    .e-gantt .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
        background: #add8e6;   
     }
  `],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public editSettings: EditSettingsModel = {};
  public toolbar: ToolbarItem[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];

    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
    };
    this.toolbar = [
      'Add', 'Edit', 'Delete', 'Update', 'Cancel',
      'ExpandAll', 'CollapseAll'
    ];
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {GanttModule, EditService, GanttComponent, ToolbarService, SelectionService, ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule],
  providers: [EditService, ToolbarService, SelectionService],
  template: `
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" (created)="created()" [editSettings]="editSettings" [toolbar]="toolbar">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public editSettings: EditSettingsModel = {};
  public toolbar: ToolbarItem[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
    };
    this.toolbar = [
      'Add', 'Edit', 'Delete', 'Update', 'Cancel',
      'ExpandAll', 'CollapseAll'
    ];
  }

  public created() {
    let toolbar = ((this.ganttInstance as GanttComponent).element as HTMLElement).querySelector('.e-toolbar');
    (this.ganttInstance as GanttComponent).element.appendChild(toolbar as HTMLElement);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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 { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GanttModule, GanttComponent, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule, SwitchModule],
  providers: [ToolbarService, SelectionService],
  template: `
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public toolbar: any[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.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' }];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'expandall') {
      (this.ganttInstance as GanttComponent).expandAll();
    }
    if (args.item.id === 'collapseall') {
      (this.ganttInstance as GanttComponent).collapseAll();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • 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 supports using both built-in and custom toolbar items simultaneously. In this example, ExpandAll and CollapseAll are built-in items, while Test is a custom item added to the toolbar.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GanttModule, GanttComponent, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ToolbarItems } from '@syncfusion/ej2-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule],
  providers: [ToolbarService, SelectionService],
  template: `
    <div style="margin-left:180px;padding:20px;">
      <p id="message"></p>
    </div>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)">
    </ejs-gantt>`,
  styles: [`
    #message {
      color: red;
      text-align: center;
      font-weight: bold;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public toolbar?: ToolbarItems[] | object;
  public message: string = '';

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.toolbar = ['ExpandAll', 'CollapseAll', { text: 'Test', tooltipText: 'Click', id: 'Click' }];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Click') {
      this.message = `Custom Toolbar Clicked`;
    }
  }
}
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 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 { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GanttModule, GanttComponent, EditService, ToolbarService, SelectionService, FilterService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { SwitchModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttModule, SwitchModule],
  providers: [EditService, ToolbarService, FilterService, SelectionService],
  template: `
  <div style="margin-bottom: 20px;">
    <label style="margin-right: 10px;font-weight: bold;">Enable or disable toolbar items</label>
    <ejs-switch checked="true" (change)="onSwitchChange($event)"></ejs-switch>
  </div>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings"  [allowFiltering]='true' [editSettings]="editSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)">
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public editSettings: EditSettingsModel = {};
  public toolbar: any[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
      { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
      { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
      { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
      { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
      { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
    };
    this.toolbar = [{ text: 'Quick Filter', id: 'QuickFilter' }, { text: 'Clear Filter', id: 'ClearFilter' }];
  }

  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'QuickFilter') {
      (this.ganttInstance as GanttComponent).filterByColumn('TaskName', 'startswith', 'Approval');
    }
    if (args.item.id === 'ClearFilter') {
      (this.ganttInstance as GanttComponent).clearFiltering();
    }
  }

  public onSwitchChange(args: ChangeEventArgs): void {
    const enable = args.checked as boolean;
    (this.ganttInstance as GanttComponent).toolbarModule.enableItems(['QuickFilter', 'ClearFilter'], enable);
  }
}
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

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 { Component, ViewEncapsulation, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { GanttComponent, GanttModule, ToolbarService, FilterService } from '@syncfusion/ej2-angular-gantt';
import { ItemModel, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { AutoCompleteAllModule, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [GanttModule, ToolbarModule, AutoCompleteAllModule],
    providers: [ToolbarService, FilterService],
    template: `
    <ng-template #template>
      <ejs-autocomplete #autoComplete placeholder="Search TaskName" [dataSource]="dropDownData" (change)="onChange($event)">
      </ejs-autocomplete>
    </ng-template>
    <ejs-toolbar [items]="toolbarItems"></ejs-toolbar>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [allowFiltering]="true"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
    @ViewChild('gantt', { static: false }) public gantt?: GanttComponent;
    @ViewChild('template', { static: true }) public templateRef!: TemplateRef<any>
    public data?: object[];
    public taskSettings?: object;
    public dropDownData: string[] = [
        'ClearFilter',
        'Project Kickoff', 'Site Selection', 'Soil Analysis',
        'Approval of Soil Report', 'Cost Estimation',
        'Create Floor Plan', 'Material Listing', 'Approval of Estimate'
    ];
    public toolbarItems: ItemModel[] = [];

    ngOnInit(): void {
        this.data = [
            { TaskID: 1, TaskName: 'Project Kickoff', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
            { TaskID: 2, TaskName: 'Site Selection', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 55 },
            { TaskID: 3, TaskName: 'Soil Analysis', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 65 },
            { TaskID: 4, TaskName: 'Approval of Soil Report', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 35 },
            { TaskID: 5, TaskName: 'Cost Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
            { TaskID: 6, TaskName: 'Create Floor Plan', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 95 },
            { TaskID: 7, TaskName: 'Material Listing', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 35 },
            { TaskID: 8, TaskName: 'Approval of Estimate', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 }
        ];
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'ParentID'
        };
        this.toolbarItems = [
            {
                template: this.templateRef,
                align: 'Left',
                tooltipText: 'Search TaskName'
            }
        ];
    }

    onChange(event: ChangeEventArgs): void {
        const selectedTask = event.value as string;
        if (event.itemData) {
            (this.gantt as GanttComponent).filterByColumn('TaskName', 'equal', selectedTask);
        } else {
            (this.gantt as GanttComponent).clearFiltering();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));