Filtering in Angular Gantt component

13 Oct 202524 minutes to read

Filtering allows you to view specific or related records based on defined criteria. The Gantt component supports options like filter menu, Excel-like filtering, and toolbar search to narrow down visible data.

To enable filtering, set allowFiltering to true in the Gantt configuration. You can define filter options using filterSettings and configure toolbar search using searchSettings property.

To activate filtering functionality, inject the FilterService in the providers of the component.

  • The filtering UI is rendered based on the column type, allowing data to be filtered using appropriate operators.
  • The filter menu is enabled by default. To disable the filtering option for a specific column, set the allowFiltering property of the column to false.

Apply initial filter on load

To apply filtering during the initial render of the Syncfusion® Angular Gantt component, define the filter conditions using a predicate object within the filterSettings.columns property.

The following sample demonstrates how to apply an initial filter where TaskName starts with Identify and TaskID equals 2, using a Predicate condition set to and.

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

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

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public columns: object[] = [];
  public filterSettings: 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: '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.filterSettings = {
      columns: [
        { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
        { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }
      ]
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Supported filter operators

Filter operators can be set using the filterSettings.columns.operator property to define the comparison logic for each column.

The available operators and their supported data types are:

Operator Description Supported Types
startswith Matches values beginning with the specified value. String
endswith Matches values ending with the specified value. String
contains Matches values that include the specified value. String
equal Matches values exactly equal to the specified value. String, Number, Boolean, Date
notequal Matches values not equal to the specified value. String, Number, Boolean, Date
greaterthan Matches values greater than the specified value. Number, Date
greaterthanorequal Matches values greater than or equal to the value. Number, Date
lessthan Matches values less than the specified value. Number, Date
lessthanorequal Matches values less than or equal to the value. Number, Date

NOTE

By default, the filterSettings.columns.operator value is equal

Hierarchy-based filtering modes

The Angular Gantt component supports multiple filtering modes, which can be configured using the filterSettings.hierarchyMode property. The available modes are:

  • Parent: This is the default mode. Filtered records are displayed along with their parent records. If no parent exists, only the filtered records are shown.

  • Child: Displays filtered records along with their child records. If no child exists, only the filtered records are shown.

  • Both: Displays filtered records along with both parent and child records. If neither exists, only the filtered records are shown.

  • None: Displays only the filtered records without any parent or child context.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, DropDownListAllModule],
  providers: [FilterService, ToolbarService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="padding-top: 7px;padding-bottom:20px; display: flex; align-items: center; gap: 10px;">
      <label style={font-weight:bold}}>Hierarchy Mode:</label>
      <ejs-dropdownlist (change)="onChange($event)" [dataSource]="dropData" [fields]="fields" value="Parent">
      </ejs-dropdownlist>
    </div>
    <ejs-gantt #gantt height="370px" [allowFiltering]="true" [dataSource]="data" [toolbar]="toolbar" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [columns]="columns">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public columns: object[] = [];
  public splitterSettings: object = {};
  public dropData: object[] = [];
  public fields: 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.toolbar = ['Search'];
    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.dropData = [
      { id: 'Parent', mode: 'Parent' },
      { id: 'Child', mode: 'Child' },
      { id: 'Both', mode: 'Both' },
      { id: 'None', mode: 'None' }
    ];
    this.fields = { text: 'mode', value: 'id' };
  }

  public onChange(e: ChangeEventArgs): void {
    let mode: any = <string>e.value;
    (this.ganttInstance as GanttComponent).filterSettings.hierarchyMode = mode;
    (this.ganttInstance as GanttComponent).searchSettings.hierarchyMode = mode;
    (this.ganttInstance as GanttComponent).clearFiltering();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable diacritic-sensitive filtering

By default, the Syncfusion® Angular Gantt component ignores diacritic characters during filtering. To enable filtering with diacritic sensitivity, set the filterSettings.ignoreAccent property to true.

The following sample demonstrates this behavior: when filtering the TaskName column, entries containing diacritic characters (e.g., “Próject”, “Projéct”) will be matched if you enter the base text Project.

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

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

export class AppComponent implements OnInit {
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public columns: object[] = [];
  public filterSettings: object = {};

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Projéct initiàtion', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify site locàtionify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perförm soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil tëst appröval', 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: 'Develöp floor plan for estimàtion', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List matërials', 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: '120' },
      { 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.filterSettings = {
      ignoreAccent: true
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Programmatic filtering using method

You can apply dynamic filtering in the Syncfusion® Angular Gantt by using the filterByColumn method. This enables programmatic filtering without relying on UI interactions.

The following sample demonstrates how to filter the TaskName and TaskID columns using single and multiple values. The filtering is triggered through an external button click by calling the filterByColumn method.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <button class="filter-btn" ejs-button (click)="onSingleValueFilter()">Filter with single value</button>
    <button ejs-button id="multiFilter" (click)="onMultipleValueFilter()">Filter with multiple values</button>
    <br /><br /><br />
    <ejs-gantt #gantt height="430px" [allowFiltering]="true" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [columns]="columns">
    </ejs-gantt>`,
  styles: [`
    .filter-btn {
      margin-right: 10px;
    }
  `]
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  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: '120' },
      { 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
    };
  }

  // Filter by a single value.
  public onSingleValueFilter(): void {
    (this.ganttInstance as GanttComponent).clearFiltering();
    (this.ganttInstance as GanttComponent).filterByColumn('TaskName', 'startswith', 'Iden', 'and');
  }

  // Filter by multiple values.
  public onMultipleValueFilter(): void {
    (this.ganttInstance as GanttComponent).clearFiltering();
    (this.ganttInstance as GanttComponent).filterByColumn('TaskID', 'equal', [2, 3, 4], 'or');
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear all applied filters

You can clear all the filtering conditions applied in the Gantt component by using the clearFiltering method.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <button ejs-button (click)="clearFilter()">Clear Filter</button>
    <br /><br /><br />
    <ejs-gantt #gantt height="370px" [allowFiltering]="true" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [columns]="columns" [filterSettings]="filterSettings">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public columns: object[] = [];
  public filterSettings: 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: '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.filterSettings = {
      columns: [
        { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
        { field: 'Progress', matchCase: false, operator: 'equal', predicate: 'and', value: 50 }
      ]
    };
  }

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

Set different filter types per column

You can enable different filter types for individual columns in the Gantt component by setting the column.filter.type property.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, FilterService } from '@syncfusion/ej2-angular-gantt';
import { DropDownListComponent, DropDownListAllModule, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, DropDownListAllModule],
  providers: [FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="container" style="margin-bottom: 20px; display: flex; gap: 40px;">
      <div style="display: flex; align-items: center; gap: 10px;">
        <label style={font-weight:bold}>Select Column:</label>
        <ejs-dropdownlist #fieldDropDown [dataSource]="fieldData" (change)="onFieldChange($event)" placeholder="Select column">
        </ejs-dropdownlist>
      </div>
      <div style="display: flex; align-items: center; gap: 10px;">
        <label style={font-weight:bold}>Select Filter Type:</label>
        <ejs-dropdownlist [dataSource]="typeData" [enabled]="typeEnabled" (change)="onTypeChange($event)" placeholder="Select filter type">
        </ejs-dropdownlist>
      </div>
    </div>
    <ejs-gantt #gantt height="430px" [allowFiltering]="true" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [columns]="columns" [filterSettings]="filterSettings">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public ganttInstance!: GanttComponent;
  @ViewChild('fieldDropDown') public fieldDropDown!: DropDownListComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = {};
  public columns: Column[] = [];
  public filterSettings: object = {};
  public fieldData: string[] = [];
  public typeData: string[] = ['Menu', 'Excel'];
  public typeEnabled: boolean = false;

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), Progress: 30 },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/03/2019'), Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/04/2019'), Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/05/2019'), Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/06/2019'), Progress: 60 },
      { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('04/07/2019'), Progress: 70 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2019'), Progress: 80 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/09/2019'), Progress: 90 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      progress: 'Progress'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', width: '120' },
      { field: 'TaskName', headerText: 'Task Name', width: '250' },
      { field: 'StartDate', headerText: 'Start Date', width: '150' },
      { field: 'Progress', headerText: 'Progress', width: '150' }
    ];
    this.splitterSettings = {
      columnIndex: 2
    };
    // Populate dropdown with column field names.
    this.fieldData = this.columns.map(col => col.field as string);
  }

  public onFieldChange(args: ChangeEventArgs): void {
    this.typeEnabled = true;
  }

  public onTypeChange(args: ChangeEventArgs): void {
    const selectedField = this.fieldDropDown.value as string;
    const selectedType = args.value as string;
    const column = this.columns.find(col => col.field === selectedField);
    if (column) {
      (column as Column).filter = { type: selectedType };
      this.ganttInstance.refresh();
    }
  }
}

interface Column {
  field: string;
  headerText: string;
  width: string;
  filter?: { type: string };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize filtering behavior using events

You can customize the filtering behavior in the Syncfusion® Angular Gantt using the actionBegin and actionComplete events. These events allow you to inject custom logic at different stages of the filtering workflow.

The following sample demonstrates how to handle different filtering stages using args.requestType:

  • For filterBeforeOpen, customize filter operators based on args.columnType (number or string).
  • For filtering, cancel the action if args.currentFilteringColumn is StartDate.
  • For filterAfterOpen, apply background styling to the filter dialog content and footer.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, FilterService } from '@syncfusion/ej2-angular-gantt';
import { FilterSettingsModel } from '@syncfusion/ej2-angular-gantt';
import { FilterEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers: [FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="margin-top: 10px;">
      <p style="color: red; text-align: center;"></p>
      <p style="color: red; text-align: center;"></p>
    </div>
    <ejs-gantt #gantt height="370px" [allowFiltering]="true" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [columns]="columns" [filterSettings]="filterSettings" (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt', { static: true }) public gantt!: GanttComponent;
  public data: object[] = [];
  public taskSettings = {};
  public splitterSettings = {};
  public filterSettings: FilterSettingsModel = {};
  public columns: object[] = [];
  public actionBeginMessage = '';
  public actionCompleteMessage = '';

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

  public actionBegin(args: FilterEventArgs): void {
    this.actionBeginMessage = '';
    if (args.requestType === "filterBeforeOpen") {
      if ((args as any).columnType === 'number') {
        (args as any).filterModel.customFilterOperators.numberOperator = [
          { value: 'equal', text: 'Equal' },
          { value: 'notequal', text: 'Not Equal' }
        ];
        this.actionBeginMessage = 'Custom number filter operators applied.';
      } else if ((args as any).columnType === 'string') {
        (args as any).filterModel.customFilterOperators.stringOperator = [
          { value: 'contains', text: 'Contains' },
          { value: 'startswith', text: 'Starts With' }
        ];
        this.actionBeginMessage = 'Custom string filter operators applied.';
      }
    }

    // Cancel filtering for StartDate column.
    if (args.requestType === 'filtering' && args.currentFilteringColumn === 'StartDate') {
      args.cancel = true;
      this.actionBeginMessage = args.requestType + ' is not allowed for StartDate column';
    } else {
      this.actionBeginMessage = args.requestType + ' action is triggered in actionBegin event';
    }
  }

  public actionComplete(args: FilterEventArgs): void {
    if (args.requestType === "filterAfterOpen") {
      this.actionCompleteMessage = 'Applied CSS for filter dialog during filterafteropen action';
      const content = (args as any).filterModel.dlgDiv.querySelector('.e-dlg-content') as HTMLElement;
      const footer = (args as any).filterModel.dlgDiv.querySelector('.e-footer-content') as HTMLElement;
      if (content) content.style.background = '#eeeaea';
      if (footer) footer.style.background = '#30b0ce';
    }
    if (args.requestType === 'filtering') {
      this.actionCompleteMessage = args.requestType + ' action is triggered in actionComplete event';
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));