Syncfusion AI Assistant

How can I help you?

Searching in Angular Gantt Chart Component

1 Feb 202624 minutes to read

The Syncfusion® Angular Gantt Chart component allows quick filtering of records based on search input, improving access to relevant data in large datasets.

To enable search functionality, include the Search item in the toolbar configuration and inject both FilterService and ToolbarService into the component’s providers array.

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { FilterService, ToolbarService, GanttModule, ToolbarItem } from '@syncfusion/ej2-angular-gantt';

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

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

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.splitterSettings = {
      columnIndex: 3
    };
    this.toolbar = ['Search'];
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Syncfusion® Angular Gantt component allows applying search criteria during initial load using the searchSettings property.

To configure this feature, define the following properties:

Property Description
fields Defines the fields where the search should be applied.
operator Sets the condition for matching (e.g., contains, equals).
key Specifies the value to search for.
ignoreCase Determines if the search should be case-insensitive.
ignoreAccent Ignores diacritic characters or accents during the search.

The following sample demonstrates an initial search where fields is set to TaskName, operator is contains, key is Pröduct, with ignoreCase set to true and ignoreAccent set to true (e.g., typing “product” will match “Pröduct”).

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { FilterService, ToolbarService, GanttModule, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { SearchSettingsModel } from '@syncfusion/ej2-angular-grids';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers: [FilterService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt height="370px" [dataSource]="data"  [searchSettings]="searchSettings"  [taskFields]="taskSettings" [toolbar]="toolbar" [splitterSettings] = "splitterSettings">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public toolbar?: ToolbarItem[];
  public searchSettings?: SearchSettingsModel;
  public columns?: object[];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Pröduct Concept', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
      { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('2019-04-02'), Duration: 3, Progress: 30, ParentID: 1 },
      { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('2019-04-02'), Duration: 3, ParentID: 1 },
      { TaskID: 4, TaskName: 'Prepare pröduct skëtch and notes', StartDate: new Date('2019-04-02'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1 },
      { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('2019-04-02'), Duration: 0, Predecessor: '3,4', Indicators: [{ date: '2019-04-10', name: '#briefing', title: 'Product concept breifing' }] },
      { TaskID: 6, TaskName: 'Market Research', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
      { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('2019-04-04'), EndDate: new Date('2019-04-21'), ParentID: 6 },
      { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7 },
      { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', ParentID: 7 },
      { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6 },
      { TaskID: 11, TaskName: 'Product strength ànalsysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '9', ParentID: 6 },
      { TaskID: 12, TaskName: 'Resëarch complete', StartDate: new Date('2019-04-04'), Duration: 0, Predecessor: '10', Indicators: [{ date: '2019-04-20', name: '#meeting', title: '1st board of directors meeting' }], ParentID: 6 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    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.splitterSettings = {
      columnIndex: 3
    };
    this.toolbar = ['Search'];
    this.searchSettings = {
      fields: ['TaskName'],
      operator: 'contains',
      key: 'Pröduct',
      ignoreCase: true,
      ignoreAccent: true
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search operators

Search operators specify the type of comparison used during a search. These are configured through the searchSettings.operator property.

The following operators are supported in searching:

Operator Description
startsWith Matches values that begin with the specified text.
endsWith Matches values that end with the specified text.
contains Matches values that include the specified text.
equal Matches values that exactly match the specified text.
notEqual Matches values that do not match the specified text.

The default value for searchSettings.operator is contains.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, FilterService, ToolbarService, GanttModule, ToolbarItem, SearchSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { TextBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-inputs';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule, TextBoxModule, DropDownListModule],
  providers: [FilterService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
      <label style="margin-right: 10px;">Change the search operator:</label>
      <ejs-dropdownlist [dataSource]="ddlData" [fields]="fields" [value]="searchSettings?.operator" (change)="valueChange($event)"
      width="150px"></ejs-dropdownlist>
    </div>
    <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" [splitterSettings]="splitterSettings" [searchSettings]="searchSettings" [columns]="columns">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public toolbar?: ToolbarItem[];
  public searchSettings?: SearchSettingsModel;
  public columns?: object[];
  public ddlData?: object[] = [
    { text: 'Contains', value: 'contains' },
    { text: 'Starts With', value: 'startswith' },
    { text: 'Ends With', value: 'endswith' },
    { text: 'Equal', value: 'equal' },
    { text: 'Not Equal', value: 'notequal' }
  ];
  public fields?: object = { text: 'text', value: 'value' };

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), Duration: 5, Progress: 30 },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/03/2019'), Duration: 3, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/05/2019'), Duration: 2, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/06/2019'), Duration: 6, Progress: 60 },
      { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('04/07/2019'), Duration: 5, Progress: 70 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2019'), Duration: 3, Progress: 80 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/09/2019'), Duration: 4, Progress: 90 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress'
    };
    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.splitterSettings = {
     Index: 2
    };
    this.toolbar = ['Search'];
    this.searchSettings = { operator: 'contains' };
  }

  public valueChange(args: ChangeEventArgs): void {
    (this.ganttInstance as GanttComponent).searchSettings.operator = String(args.value);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search by external button

To perform a search from an external button in the Syncfusion® Angular Gantt, call the search method programmatically with the desired keyword.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, FilterService, ToolbarService, GanttModule, ToolbarItem, SearchSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { TextBoxModule, TextBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-inputs'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule, TextBoxModule],
  providers: [FilterService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
  <div style="margin-bottom: 10px; display: flex; gap: 10px; align-items: center;">
    <ejs-textbox #searchInput width="200" (change)=change($event) showClearButton='true' placeholder="Search text"></ejs-textbox>
    <button ejs-button (click)="search()">Search</button>
  </div>
  <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" [splitterSettings] = "splitterSettings">
  </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  @ViewChild('searchInput') public searchInput?: TextBoxComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public toolbar?: ToolbarItem[];
  public searchSettings?: SearchSettingsModel;
  public columns?: object[];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Product Concept', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
      { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('2019-04-02'), Duration: 3, Progress: 30, ParentID: 1 },
      { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('2019-04-02'), Duration: 3, ParentID: 1 },
      { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('2019-04-02'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1 },
      { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('2019-04-02'), Duration: 0, Predecessor: '3,4', Indicators: [{ date: '2019-04-10', name: '#briefing', title: 'Product concept breifing' }] },
      { TaskID: 6, TaskName: 'Market Research', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
      { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('2019-04-04'), EndDate: new Date('2019-04-21'), ParentID: 6 },
      { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7 },
      { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', ParentID: 7 },
      { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6 },
      { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '9', ParentID: 6 },
      { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('2019-04-04'), Duration: 0, Predecessor: '10', Indicators: [{ date: '2019-04-20', name: '#meeting', title: '1st board of directors meeting' }], ParentID: 6 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '400' },
      { field: 'StartDate', headerText: 'Start Date', width: '150' },
      { field: 'Duration', headerText: 'Duration', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' },
    ];
    this.splitterSettings = {
      columnIndex: 3
    };
    this.toolbar = ['Search'];
  }
  
  public search(): void {
    const searchValue: string = (this.searchInput as TextBoxComponent).value;
    (this.ganttInstance as GanttComponent).search(searchValue);
  };

  public change(args: ChangeEventArgs): void {
    if (args.value === undefined || args.value === null || args.value.toString() === '') {
      (this.ganttInstance as GanttComponent).search('');
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You should set the allowFiltering property to true for searching the content externally.

Search specific columns

To search specific columns in the Gantt Chart component, use the searchSettings.fields property. This allows you to define which column fields should be included in the search, instead of searching across all columns by default.

This following sample demonstrates searching only within the TaskName and Duration columns.

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { FilterService, ToolbarService, GanttModule, ToolbarItem, SearchSettingsModel } from '@syncfusion/ej2-angular-gantt';

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

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public toolbar?: ToolbarItem[];
  public searchSettings?: SearchSettingsModel;
  public columns?: object[];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Product Concept', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
      { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('2019-04-02'), Duration: 3, Progress: 30, ParentID: 1 },
      { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('2019-04-02'), Duration: 3, ParentID: 1 },
      { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('2019-04-02'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1 },
      { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('2019-04-02'), Duration: 0, Predecessor: '3,4', Indicators: [{ date: '2019-04-10', name: '#briefing', title: 'Product concept breifing' }] },
      { TaskID: 6, TaskName: 'Market Research', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
      { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('2019-04-04'), EndDate: new Date('2019-04-21'), ParentID: 6 },
      { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7 },
      { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', ParentID: 7 },
      { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6 },
      { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '9', ParentID: 6 },
      { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('2019-04-04'), Duration: 0, Predecessor: '10', Indicators: [{ date: '2019-04-20', name: '#meeting', title: '1st board of directors meeting' }], ParentID: 6 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '400' },
      { field: 'StartDate', headerText: 'Start Date', width: '150' },
      { field: 'Duration', headerText: 'Duration', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' },
    ];
    this.splitterSettings = {
      columnIndex: 3
    };
    this.toolbar = ['Search'];
    this.searchSettings = { fields: ['TaskName', 'Duration'] };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear search by external button

To clear the search results in the Syncfusion® Angular Gantt from an external button, set the searchSettings.key property to an empty string.

Alternatively, you can invoke the search method with an empty string to reset the search.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { FilterService, ToolbarService, GanttModule, ToolbarItem, SearchSettingsModel, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [FilterService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="margin-bottom: 10px">
        <button ejs-button  (click)="clearSearch()">Clear Search</button>
    </div>
    <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [searchSettings]="searchSettings" [toolbar]="toolbar" [splitterSettings] = "splitterSettings">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public toolbar?: ToolbarItem[];
  public searchSettings?: SearchSettingsModel;
  public columns?: object[];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '400' },
      { field: 'StartDate', headerText: 'Start Date', width: '150' },
      { field: 'Duration', headerText: 'Duration', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' },
    ];
    this.splitterSettings = {
      columnIndex: 3
    };
    this.toolbar = ['Search'];
    this.searchSettings = { fields: ['TaskName'], operator: 'contains', key: 'Perform', ignoreCase: true  };
  }

  public clearSearch():void {
    (this.ganttInstance as GanttComponent).searchSettings.key = '';
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search on each key stroke

You can enable instant filtering in the Syncfusion® Gantt Chart component by calling the search method on each keyup event. This can be configured within the component’s created event.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { FilterService, ToolbarService, GanttModule, ToolbarItem, SearchSettingsModel, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

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

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public toolbar?: ToolbarItem[];
  public searchSettings?: SearchSettingsModel;
  public columns?: object[];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '400' },
      { field: 'StartDate', headerText: 'Start Date', width: '150' },
      { field: 'Duration', headerText: 'Duration', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' },
    ];
    this.splitterSettings = {
      columnIndex: 3
    };
    this.toolbar = ['Search'];
  }

  public created(): void {
    (document.getElementById((this.ganttInstance as GanttComponent).element.id + "_searchbar") as Element).addEventListener('keyup', (event) => {
      (this.ganttInstance as GanttComponent).search(((event as MouseEvent).target as HTMLInputElement).value)
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Highlight the search text

The Syncfusion® Angular Gantt Chart component supports highlighting matched search text within grid cells to improve visibility of search results.

This can be achieved using the queryCellInfo event, which is triggered during cell rendering. Within this event, check if the cell belongs to the target column, retrieve the cell value and search keyword, and use the includes method to detect matches. If a match is found, wrap the matched text in a <span> with a custom CSS class for styling.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { FilterService, ToolbarService, GanttModule, ToolbarItem, GanttComponent, QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Column, SearchEventArgs } from '@syncfusion/ej2-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [FilterService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" [splitterSettings]="splitterSettings" (queryCellInfo)="queryCellInfo($event)" (actionBegin)="actionBegin($event)">
    </ejs-gantt>
  `,
  styles: [`
    .customcss {
      background-color: yellow;
      font-weight: bold;
      color: black;
    }
  `]
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = { columnIndex: 3 };
  public toolbar: ToolbarItem[] = ['Search'];
  public key: string = '';

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];

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

  public actionBegin(args: SearchEventArgs): void {
    if (args.requestType === 'searching') {
      this.key = args.searchString?.toLowerCase() ?? '';
    }
  }

  public queryCellInfo(args: QueryCellInfoEventArgs): void {
    if (this.key) {
      const field = (args.column as Column).field;
      const cellContent = (args.data as ColumnData)[field];
      if (typeof cellContent === 'string' || typeof cellContent === 'number') {
        const contentStr = cellContent.toString();
        const regex = new RegExp(this.key, 'gi');
        const highlighted = contentStr.replace(regex, match => `<span class='customcss'>${match}</span>`);
        (args.cell as HTMLElement).innerHTML = highlighted;
      }
    }
  }
}

interface ColumnData {
  [key: string]: string | number;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));