Filter menu in EJ2 TypeScript Gantt control
2 May 202310 minutes to read
The Gantt control provides the menu filtering support for each column. You can enable the filter menu by setting the allowFiltering
to true
. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators.
import { Gantt, Filter } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(Filter);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
filterSettings: {
type: 'Menu'
},
allowFiltering: true
});
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/27.2.2/material.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body>
</html>
The
allowFiltering
property should be set totrue
to enable the filter menu.
Setting thecolumns.allowFiltering
property tofalse
prevents rendering filter menu for a particular column.
Custom component in filter menu
The column.filter.ui
is used to add custom filter components to a particular column.
To implement custom filter ui, define the following functions:
-
create
: Creates custom component. -
write
: Wire events for custom component. -
read
: Read the filter value from custom component.
In the following sample, dropdown is used as custom component in the TaskName column.
import { Gantt, Filter } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { createElement } from '@syncfusion/ej2-base';
Gantt.Inject(Filter);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
columns: [
{ field: 'TaskID' },
{ field: 'TaskName', filter: {
ui: {
create: (args: { target: Element, column: Object }) => {
let db: Object = new DataManager(gantt.treeGrid.grid.dataSource);
let flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
this.dropInstance = new DropDownList({
dataSource: new DataManager(gantt.treeGrid.grid.dataSource),
fields: { text: 'TaskName', value: 'TaskName' },
placeholder: 'Select a value',
popupHeight: '200px'
});
this.dropInstance.appendTo(flValInput);
},
write: (args: {
column: Object, target: Element, parent: any,
filteredValue: number | string
}) => {
this.dropInstance.value = args.filteredValue;
},
read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);
}
}
}
},
{ field: 'StartDate' },
{ field: 'Duration' }
],
allowFiltering: true
});
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/27.2.2/material.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="Gantt"></div>
</div>
</body>
</html>