Searching in EJ2 TypeScript Gantt Chart Control

16 Apr 202624 minutes to read

The Syncfusion^® EJ2 TypeScript Gantt Chart control 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 Filter service and Toolbar service into the control’s providers array.

index.ts
index.html
import { Gantt, Filter, Toolbar } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';
Gantt.Inject(Filter, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    splitterSettings: {
        columnIndex: 3
    },
    toolbar: ['Search']
});
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>

Initial search

The Syncfusion^® EJ2 TypeScript Gantt control 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”).

index.ts
index.html
import { Gantt, Filter, Toolbar, TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
import { data } from './datasource.ts';

Gantt.Inject(Filter, Toolbar);

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

const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

const searchSettings: SearchSettingsModel = {
    fields: ['TaskName'],
    operator: 'contains',
    key: 'Pröduct',
    ignoreCase: true,
    ignoreAccent: true
};

const columns: ColumnModel[] = [
    { 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 }
];

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '370px',
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    searchSettings: searchSettings,
    toolbar: ['Search'],
    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="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>

By default, Gantt searches all the bound column values. To customize this behavior, define the searchSettings.fields property.

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.

Search by external button

To search the Gantt records from an external button, invoke the search method.

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

Gantt.Inject(Filter, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowFiltering: true
});
gantt.appendTo('#Gantt');

let searchBtn: Button = new Button();
searchBtn.appendTo('#search');

document.getElementById('search').addEventListener('click', () => {
    let searchText: string = (<HTMLInputElement>document.getElementsByClassName('searchtext')[0]).value;
    gantt.search(searchText);
});
<!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 class="e-float-input" style="width: 200px; display: inline-block;">
            <input type="text" class="searchtext">
            <span class="e-float-line"></span>
            <label class="e-float-text">Search text</label>
        </div>
        <button id="search">Search</button>
        <div id='Gantt'></div>
    </div>
</body>

</html>

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

Search specific columns

To search specific columns in the Gantt Chart control, 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.

index.ts
index.html
import { Gantt, Filter, Toolbar } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Filter, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    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' },
    ],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Search'],
    searchSettings: { fields: ['TaskName', 'Duration'] }
});
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>

Clear search by external button

To clear the search results in the Syncfusion^® EJ2 TypeScript 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.

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

Gantt.Inject(Filter, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    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' },
    ],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Search'],
    searchSettings: { fields: ['TaskName'], operator: 'contains', key: 'Perform', ignoreCase: true },
});
gantt.appendTo('#Gantt');

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

document.getElementById('clear').addEventListener('click', () => {
   gantt.searchSettings.key='';
});
<!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'>
        <button id="clear">Clear Search</button>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Search on each key stroke

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

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

Gantt.Inject(Filter, Toolbar);

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

const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

const columns: ColumnModel[] = [
    { 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 }
];

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    toolbar: ['Search'],
    columns: columns,
    created: () => {
        const id: string = gantt.element.id + '_searchbar';
        const element: HTMLElement | null = document.getElementById(id);
        if (element) {
            element.addEventListener('keyup', (event: Event) => {
                const target = event.target as HTMLInputElement;
                gantt.search(target.value);
            });
        }
    }
});

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>

Highlight the search text

The Syncfusion^® EJ2 TypeScript Gantt Chart control 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.

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

Gantt.Inject(Filter, Toolbar);

let key: string = '';

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

const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

const columns: ColumnModel[] = [
    { 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 }
];

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '370px',
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    toolbar: ['Search'],
    columns: columns,
    actionBegin: (args: any) => {
        if (args.requestType === 'searching') {
            key = args.searchString ? args.searchString.toLowerCase() : '';
        }
    },
    queryCellInfo: (args: any) => {
        if (key) {
            const field: string = args.column.field;
            const value: string | number = args.data[field];

            if (typeof value === 'string' || typeof value === 'number') {
                const str: string = value.toString();
                const regex: RegExp = new RegExp(key, 'gi');
                const highlighted: string = str.replace(regex, (m: string) =>
                    `<span class='customcss'>${m}</span>`
                );
                args.cell.innerHTML = highlighted;
            }
        }
    }
});

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>
    <style>
        .customcss {
            background-color: yellow;
            font-weight: bold;
            color: black;
        }
    </style>
</head>

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

</html>

Search docs

Ask Syncfusion AI Assistant