Syncfusion AI Assistant

How can I help you?

Filter Menu in EJ2 TypeScript Gantt Chart Control

16 May 202624 minutes to read

The Syncfusion® EJ2 TypeScript Gantt Chart control offers a filter menu for each column, enabling you to filter data based on column type and supported operators such as equal, contains, greaterthan, etc. To enable this feature, set allowFiltering to true and configure filterSettings.type as Menu.

import { Gantt, Filter } from '@syncfusion/ej2-gantt';
import { data } from './datasource.ts';

Gantt.Inject(Filter);

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '370px',
    allowFiltering: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    splitterSettings: {
        columnIndex: 3
    },
    filterSettings: {
        type: 'Menu'
    },
    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 }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
	<link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="Gantt"></div>        
    </div>
</body>

</html>

To prevent the filter menu from rendering for a specific column, set columns.allowFiltering to false.

Custom control in filter menu

You can customize the filter menu in the Syncfusion® EJ2 TypeScript Gantt Chart control using the column.filter.ui property. This allows you to replace the default filter controls with custom components such as dropdowns or textboxes for specific columns. By default, the Gantt uses AutoComplete for string columns, NumericTextBox for number columns, DatePicker for date columns, DropDownList for boolean columns, and DateTimePicker for datetime columns.

The column.filter.ui property supports three essential functions:

  1. create- Initializes and renders the custom filter control inside the filter menu.
  2. write- Populates the control with the current filter value and attaches any necessary event handlers.
  3. read - Retrieves the selected value from the control and applies the filter to the column.
import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DataManager } from '@syncfusion/ej2-data';
import { createElement } from '@syncfusion/ej2-base';
import { GanttData } from './datasource.ts';

Gantt.Inject(Filter);

let gantt: Gantt;
let dropInstance: DropDownList;

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 2
};

let filter = {
    ui: {
        create: (args: any) => {
            let input: HTMLElement = createElement('input', { className: 'flm-input' });
            args.target.appendChild(input);
            dropInstance = new DropDownList({
                dataSource: new DataManager(GanttData),
                fields: { text: 'TaskName', value: 'TaskName' },
                placeholder: 'Select a value',
                popupHeight: '200px'
            });
            dropInstance.appendTo(input);
        },
        write: (args: any) => {
            dropInstance.value = args.filteredValue;
        },
        read: (args: any) => {
            args.fltrObj.filterByColumn(
                args.column.field,
                args.operator,
                dropInstance.value
            );
        }
    }
};

gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    allowFiltering: true,
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 120 },
        { field: 'TaskName', headerText: 'Task Name', width: 250, filter: filter },
        { field: 'StartDate', headerText: 'Start Date', width: 150 },
        { field: 'Progress', headerText: 'Progress', width: 150 }
    ]
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="Gantt"></div>
    </div>
</body>

</html>

Hide default filter icon while perform filtering through method

To hide the default filter icon from the UI when filtering is performed programmatically, apply the following CSS:

.e-filtermenudiv.e-icons.e-icon-filter {
      display: none;
    }

You can perform filtering programmatically by checking if args.currentTarget.id equals performFilter, and then calling filterByColumn method. If the condition is not met, use clearFiltering to reset filters via a button click.

import { Gantt, Filter } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Filter);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    allowFiltering: true,
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    splitterSettings: {
        columnIndex: 2
    },
    filterSettings: {
        type: 'Menu'
    },
    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 }
    ]
});

gantt.appendTo('#Gantt');

let filterBtn: Button = new Button();
filterBtn.appendTo('#performFilter');

let clearBtn: Button = new Button();
clearBtn.appendTo('#clearFilter');

(document.getElementById('performFilter') as HTMLElement).addEventListener('click', () => {
    gantt.filterByColumn('TaskName', 'startswith', 'Project');
});

(document.getElementById('clearFilter') as HTMLElement).addEventListener('click', () => {
    gantt.clearFiltering();
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div style="margin-bottom:10px;display:flex;gap:20px;">
            <button id="performFilter">Filter Task Name Column</button>
            <button id="clearFilter">Clear Filter</button>
        </div>
        <div id="Gantt"></div>
    </div>
</body>

</html>

Customize the default input control of filter menu dialog

To customize the default input components in the filter menu dialog, use the params property inside the column’s filter configuration. This allows you to override default settings such as autofill, spin buttons, and sort order. This allows you to override default settings based on the column type.

You can refer to the table below for supported column types, their default components, customization examples, and API references:

Column Type Default control Customization API Reference
String AutoComplete Eg: { params: { autofill: false }} AutoComplete API
Number NumericTextBox Eg: { params: { showSpinButton: false }} NumericTextBox API
Boolean DropDownList Eg: { params: { sortOrder:’Ascending’}} DropDownList API
Date DatePicker Eg: { params: { weekNumber: true }} DatePicker API
DateTime DateTimePicker Eg: { params: { showClearButton: true }} DateTimePicker API

The following sample demonstrates how to disable the autofill feature by setting the autofill property to false for the TaskName column, and how to disable the spin button by setting showSpinButton to false for the TaskID column.

import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Filter);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let filter: object = {
    params: { showSpinButton: false }
};

let taskFilter: object = {
    params: { autofill: false }
};

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 2
};

let columns: ColumnModel[] = [
    { field: 'TaskID', headerText: 'Task ID', width: 120, filter: filter },
    { field: 'TaskName', headerText: 'Task Name', width: 250, filter: taskFilter },
    { field: 'StartDate', headerText: 'Start Date', width: 150 },
    { field: 'Progress', headerText: 'Progress', width: 150 }
];

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    allowFiltering: true,
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    columns: columns
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="Gantt"></div>
    </div>
</body>

</html>

Customizing filter menu operators list

The Syncfusion® EJ2 TypeScript Gantt Chart control allows customization of the default filter operator list using the filterSettings.operators property. This allows you to define a custom set of operators shown in the filter menu for each column type, improving usability and relevance.

You can configure operators for different types using the following options:

  • stringOperator – Custom operators for string columns.
  • numberOperator – Custom operators for number columns.
  • dateOperator – Custom operators for date columns.
  • booleanOperator – Custom operators for boolean columns.
import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
import { data } from './datasource.ts';

Gantt.Inject(Filter);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let filterSettings: FilterSettingsModel = {
    type: 'Menu',
    operators: {
        stringOperator: [
            { value: 'startsWith', text: 'Starts With' },
            { value: 'endsWith', text: 'Ends With' },
            { value: 'contains', text: 'Contains' },
            { value: 'equal', text: 'Equal' },
            { value: 'notEqual', text: 'Not Equal' }
        ],
        numberOperator: [
            { value: 'equal', text: 'Equal' },
            { value: 'notEqual', text: 'Not Equal' },
            { value: 'greaterThan', text: 'Greater Than' },
            { value: 'lessThan', text: 'Less Than' }
        ],
        dateOperator: [
            { value: 'equal', text: 'Equal' },
            { value: 'notEqual', text: 'Not Equal' },
            { value: 'greaterThan', text: 'After' },
            { value: 'lessThan', text: 'Before' }
        ],
        booleanOperator: [
            { value: 'equal', text: 'Equal' },
            { value: 'notEqual', text: 'Not Equal' }
        ]
    }
};

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 2
};

let columns: ColumnModel[] = [
    { field: 'TaskID', headerText: 'Task ID', width: 120 },
    { field: 'TaskName', headerText: 'Task Name', width: 250 },
    { field: 'StartDate', headerText: 'Start Date', width: 150, type: 'date', format: 'yMd' },
    { field: 'Progress', headerText: 'Progress', width: 150 },
    { field: 'Approved', headerText: 'Approved', width: 140, type: 'boolean' }
];

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '370px',
    allowFiltering: true,
    filterSettings: filterSettings,
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    columns: columns
});

gantt.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Gantt Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="Gantt"></div>
    </div>
</body>

</html>