Syncfusion AI Assistant

How can I help you?

Searching in React Gantt Chart Component

24 Mar 202624 minutes to read

The Syncfusion® React Gantt Chart component 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 component’s providers array.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Toolbar, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

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

  const splitterSettings = {
    columnIndex: 3
  };

  const toolbar = ['Search'];

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      toolbar={toolbar}
      height="370px">
      <Inject services={[Filter, Toolbar]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, TaskFieldsModel, SplitterSettingsModel, ToolbarItem, Toolbar, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

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

  const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
  };

  const toolbar: ToolbarItem[] = ['Search'];

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      toolbar={toolbar}
      height="370px">
      <Inject services={[Filter, Toolbar]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

The Syncfusion® React Gantt component 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”).

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

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

    const splitterSettings = {
        columnIndex: 3
    };

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

    const toolbar = ['Search'];

    return (
        <GanttComponent
            dataSource={data}
            taskFields={taskFields}
            searchSettings={searchSettings}
            toolbar={toolbar}
            splitterSettings={splitterSettings}
            height="370px"
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" width="150" />
            </ColumnsDirective>
            <Inject services={[Filter, Toolbar]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';

function App() {
    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 toolbar = ['Search'];

    return (
        <GanttComponent
            dataSource={data}
            taskFields={taskFields}
            searchSettings={searchSettings}
            toolbar={toolbar}
            splitterSettings={splitterSettings}
            height="370px"
        >
            <ColumnsDirective>
                <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
                <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                <ColumnDirective field="Duration" headerText="Duration" width="150" />
                <ColumnDirective field="Progress" headerText="Progress" width="150" />
            </ColumnsDirective>
            <Inject services={[Filter, Toolbar]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';

function App() {

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

  const splitterSettings = {
    columnIndex: 2
  };

  const searchSettings = {
    operator: 'contains'
  };

  const toolbar = ['Search'];

  const ddlData = [
    { text: 'Contains', value: 'contains' },
    { text: 'Starts With', value: 'startswith' },
    { text: 'Ends With', value: 'endswith' },
    { text: 'Equal', value: 'equal' },
    { text: 'Not Equal', value: 'notequal' }
  ];

  const fields = { text: 'text', value: 'value' };

  function valueChange(e) {
    searchSettings.operator = e.value;
  }

  return (
    <div>
      <div style=>
        <label style=>Change the search operator:</label>
        <DropDownListComponent dataSource={ddlData} fields={fields} value={searchSettings.operator} width="150px" change={valueChange} />
      </div>

      <GanttComponent
        dataSource={data}
        taskFields={taskFields}
        splitterSettings={splitterSettings}
        searchSettings={searchSettings}
        toolbar={toolbar}
        height="370px"
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
          <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
          <ColumnDirective field="Duration" headerText="Duration" width="150" />
          <ColumnDirective field="Progress" headerText="Progress" width="150" />
        </ColumnsDirective>
        <Inject services={[Filter, Toolbar]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';

function App() {

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

  const splitterSettings: SplitterSettingsModel = {
    columnIndex: 2
  };

  const searchSettings: SearchSettingsModel = {
    operator: 'contains'
  };

  const toolbar = ['Search'];

  const ddlData = [
    { text: 'Contains', value: 'contains' },
    { text: 'Starts With', value: 'startswith' },
    { text: 'Ends With', value: 'endswith' },
    { text: 'Equal', value: 'equal' },
    { text: 'Not Equal', value: 'notequal' }
  ];

  const fields = { text: 'text', value: 'value' };

  function valueChange(e: { value: any; }) {
    searchSettings.operator = e.value;
  }

  return (
    <div>
      <div style=>
        <label style=>Change the search operator:</label>
        <DropDownListComponent dataSource={ddlData} fields={fields} value={searchSettings.operator} width="150px" change={valueChange} />
      </div>

      <GanttComponent
        dataSource={data}
        taskFields={taskFields}
        splitterSettings={splitterSettings}
        searchSettings={searchSettings}
        toolbar={toolbar}
        height="370px"
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
          <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
          <ColumnDirective field="Duration" headerText="Duration" width="150" />
          <ColumnDirective field="Progress" headerText="Progress" width="150" />
        </ColumnsDirective>
        <Inject services={[Filter, Toolbar]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Search by external button

To perform a search from an external button in the Syncfusion® React Gantt, call the search method programmatically with the desired keyword.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {

    let ganttInstance = null;
    let searchInput = null;

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

    const splitterSettings = {
        columnIndex: 3
    };

    const searchSettings = {};

    const toolbar = ['Search'];

    function search() {
        if (ganttInstance && searchInput) {
            const value = String(searchInput.value || '');
            ganttInstance.search(value);
        }
    }

    function clearWhenEmpty(args) {
        if (ganttInstance && (!args.value || args.value.toString() === '')) {
            ganttInstance.search('');
        }
    }

    return (
        <div>
            <div style=>
                <TextBoxComponent
                    width="200"
                    placeholder="Search text"
                    showClearButton={true}
                    change={clearWhenEmpty}
                    ref={(t) => searchInput = t}
                />
                <ButtonComponent onClick={search}>Search</ButtonComponent>
            </div>

            <GanttComponent
                ref={(g) => ganttInstance = g}
                dataSource={data}
                taskFields={taskFields}
                toolbar={toolbar}
                splitterSettings={splitterSettings}
                searchSettings={searchSettings}
                height="370px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                    <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
                <Inject services={[Filter, Toolbar]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { TextBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';

function App() {

    let ganttInstance: GanttComponent | null = null;
    let searchInput: TextBoxComponent | null = null;

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

    const splitterSettings: SplitterSettingsModel = {
        columnIndex: 3
    };

    const searchSettings: SearchSettingsModel = {};

    const toolbar: any = ['Search'];

    function search(): void {
        if (ganttInstance && searchInput) {
            const value: string = String(searchInput.value || '');
            ganttInstance.search(value);
        }
    }

    function clearWhenEmpty(args: ChangeEventArgs): void {
        if (ganttInstance && (!args.value || args.value.toString() === '')) {
            ganttInstance.search('');
        }
    }

    return (
        <div>
            <div style=>
                <TextBoxComponent
                    width="200"
                    placeholder="Search text"
                    showClearButton={true}
                    change={clearWhenEmpty}
                    ref={(t) => searchInput = t}
                />
                <ButtonComponent onClick={search}>Search</ButtonComponent>
            </div>

            <GanttComponent
                ref={(g) => ganttInstance = g}
                dataSource={data}
                taskFields={taskFields}
                toolbar={toolbar}
                splitterSettings={splitterSettings}
                searchSettings={searchSettings}
                height="370px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                    <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
                <Inject services={[Filter, Toolbar]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</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 component, 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

   let ganttInstance = null;

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

   const splitterSettings = {
      columnIndex: 3
   };

   const toolbar = ['Search'];

   const searchSettings = {
      fields: ['TaskName', 'Duration']
   };

   return (
      <GanttComponent
         ref={(g) => ganttInstance = g}
         dataSource={data}
         taskFields={taskFields}
         searchSettings={searchSettings}
         toolbar={toolbar}
         splitterSettings={splitterSettings}
         height="370px"
      >
         <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
            <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
            <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
            <ColumnDirective field="Duration" headerText="Duration" width="150" />
            <ColumnDirective field="Progress" headerText="Progress" width="150" />
         </ColumnsDirective>
         <Inject services={[Filter, Toolbar]} />
      </GanttComponent>
   );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';

function App() {

   let ganttInstance: GanttComponent | null = null;

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

   const splitterSettings: SplitterSettingsModel = {
      columnIndex: 3
   };

   const toolbar = ['Search'];

   const searchSettings: SearchSettingsModel = {
      fields: ['TaskName', 'Duration']
   };

   return (
      <GanttComponent
         ref={(g) => ganttInstance = g}
         dataSource={data}
         taskFields={taskFields}
         searchSettings={searchSettings}
         toolbar={toolbar}
         splitterSettings={splitterSettings}
         height="370px"
      >
         <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
            <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
            <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
            <ColumnDirective field="Duration" headerText="Duration" width="150" />
            <ColumnDirective field="Progress" headerText="Progress" width="150" />
         </ColumnsDirective>
         <Inject services={[Filter, Toolbar]} />
      </GanttComponent>
   );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Clear search by external button

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {

    let ganttInstance = null;

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

    const splitterSettings = {
        columnIndex: 3
    };

    const toolbar = ['Search'];

    const searchSettings = {
        fields: ['TaskName'],
        operator: 'contains',
        key: 'Perform',
        ignoreCase: true
    };

    function clearSearch() {
        if (ganttInstance) {
            ganttInstance.searchSettings.key = '';
        }
    }

    return (
        <div>
            <div style=>
                <ButtonComponent onClick={clearSearch}>Clear Search</ButtonComponent>
            </div>
            <GanttComponent
                ref={(g) => ganttInstance = g}
                dataSource={data}
                taskFields={taskFields}
                searchSettings={searchSettings}
                toolbar={toolbar}
                splitterSettings={splitterSettings}
                height="370px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                    <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
                <Inject services={[Filter, Toolbar]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';

function App() {

    let ganttInstance: GanttComponent | null = null;

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

    const splitterSettings: SplitterSettingsModel = {
        columnIndex: 3
    };

    const toolbar = ['Search'];

    const searchSettings: SearchSettingsModel = {
        fields: ['TaskName'],
        operator: 'contains',
        key: 'Perform',
        ignoreCase: true
    };

    function clearSearch(): void {
        if (ganttInstance) {
            ganttInstance.searchSettings.key = '';
        }
    }

    return (
        <div>
            <div style=>
                <ButtonComponent onClick={clearSearch}>Clear Search</ButtonComponent>
            </div>
            <GanttComponent
                ref={(g) => ganttInstance = g}
                dataSource={data}
                taskFields={taskFields}
                searchSettings={searchSettings}
                toolbar={toolbar}
                splitterSettings={splitterSettings}
                height="370px"
            >
                <ColumnsDirective>
                    <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
                    <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
                    <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
                    <ColumnDirective field="Duration" headerText="Duration" width="150" />
                    <ColumnDirective field="Progress" headerText="Progress" width="150" />
                </ColumnsDirective>
                <Inject services={[Filter, Toolbar]} />
            </GanttComponent>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Search on each key stroke

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  let ganttInstance = null;

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

  const splitterSettings = {
    columnIndex: 3
  };

  const toolbar = ['Search'];

  function created() {
    const id = ganttInstance ? ganttInstance.element.id + "_searchbar" : "";
    const element = document.getElementById(id);
    if (element) {
      element.addEventListener("keyup", (event) => {
        if (ganttInstance) {
          ganttInstance.search(event.target.value);
        }
      });
    }
  }

  return (
    <GanttComponent
      ref={(g) => ganttInstance = g}
      dataSource={data}
      taskFields={taskFields}
      toolbar={toolbar}
      splitterSettings={splitterSettings}
      height="370px"
      created={created}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
        <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
        <ColumnDirective field="Duration" headerText="Duration" width="150" />
        <ColumnDirective field="Progress" headerText="Progress" width="150" />
      </ColumnsDirective>
      <Inject services={[Filter, Toolbar]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';

function App() {

  let ganttInstance: GanttComponent | null = null;

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

  const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
  };

  const toolbar: any = ['Search'];

  function created(): void {
    const id = ganttInstance ? ganttInstance.element.id + "_searchbar" : "";
    const element = document.getElementById(id);
    if (element) {
      element.addEventListener("keyup", (event: any) => {
        if (ganttInstance) {
          ganttInstance.search(event.target.value);
        }
      });
    }
  }

  return (
    <GanttComponent
      ref={(g) => ganttInstance = g}
      dataSource={data}
      taskFields={taskFields}
      toolbar={toolbar}
      splitterSettings={splitterSettings}
      height="370px"
      created={created}
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
        <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
        <ColumnDirective field="Duration" headerText="Duration" width="150" />
        <ColumnDirective field="Progress" headerText="Progress" width="150" />
      </ColumnsDirective>
      <Inject services={[Filter, Toolbar]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Highlight the search text

The Syncfusion® React Gantt Chart component 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  let ganttInstance = null;
  let key = '';

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

  const splitterSettings = {
    columnIndex: 3
  };

  const toolbar = ['Search'];

  function actionBegin(args) {
    if (args.requestType === 'searching') {
      key = args.searchString ? args.searchString.toLowerCase() : '';
    }
  }

  function queryCellInfo(args) {
    if (key) {
      const field = args.column.field;
      const value = args.data[field];

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

  return (
    <div>
      <style>
        {`.customcss { background-color: yellow; font-weight: bold; color: black; }`}
      </style>

      <GanttComponent
        ref={(g) => ganttInstance = g}
        dataSource={data}
        taskFields={taskFields}
        toolbar={toolbar}
        splitterSettings={splitterSettings}
        height="370px"
        actionBegin={actionBegin}
        queryCellInfo={queryCellInfo}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
          <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
          <ColumnDirective field="Duration" headerText="Duration" width="150" />
          <ColumnDirective field="Progress" headerText="Progress" width="150" />
        </ColumnsDirective>

        <Inject services={[Filter, Toolbar]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { Column } from '@syncfusion/ej2-grids';

function App() {

  let ganttInstance: GanttComponent | null = null;
  let key: string = '';

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

  const splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
  };

  const toolbar: any = ['Search'];

  function actionBegin(args: any): void {
    if (args.requestType === 'searching') {
      key = args.searchString ? args.searchString.toLowerCase() : '';
    }
  }

  function queryCellInfo(args: any): void {
    if (key) {
      const field = (args.column as Column).field;
      const value = args.data[field];

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

  return (
    <div>
      <style>
        {`.customcss { background-color: yellow; font-weight: bold; color: black; }`}
      </style>

      <GanttComponent
        ref={(g) => ganttInstance = g}
        dataSource={data}
        taskFields={taskFields}
        toolbar={toolbar}
        splitterSettings={splitterSettings}
        height="370px"
        actionBegin={actionBegin}
        queryCellInfo={queryCellInfo}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Left" width="100" />
          <ColumnDirective field="TaskName" headerText="Task Name" width="400" />
          <ColumnDirective field="StartDate" headerText="Start Date" width="150" />
          <ColumnDirective field="Duration" headerText="Duration" width="150" />
          <ColumnDirective field="Progress" headerText="Progress" width="150" />
        </ColumnsDirective>

        <Inject services={[Filter, Toolbar]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>