Filter Menu in JavaScript Gantt control

JavaScript

Search results

06 Jun 2023 / 2 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.

Source

Preview

index.ts

index.html

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/21.2.3/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>
</head>

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

</html>

The allowFiltering property should be set to true to enable the filter menu. Setting the columns.allowFiltering property to false prevents rendering filter menu for a particular column.

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.

Source

Preview

index.ts

index.html

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/21.2.3/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>
</head>

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

</html>

Filter Menu in JavaScript Gantt control

Custom component in filter menu