Searching in React TreeGrid

8 Oct 202518 minutes to read

Search records by calling the search method with a search key. A search text box can also be placed in the TreeGrid toolbar by adding the search item to the toolbar.

To enable searching, inject the Filter
module into the TreeGrid.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['Search'];
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['Search'];

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter,Toolbar]}/>
    </TreeGridComponent>
};
export default App;

Initial search

Apply search on initial render by setting fields, operator, key, and ignoreCase in searchSettings.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['Search'];
    const searchOptions = {
        fields: ['taskName'],
        ignoreCase: true,
        key: 'dev',
        operator: 'contains'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={toolbarOptions} searchSettings={searchOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, SearchSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['Search'];
    const searchOptions: SearchSettingsModel = {
        fields: ['taskName'],
        ignoreCase: true,
        key: 'dev',
        operator: 'contains'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        height='270' toolbar={toolbarOptions} searchSettings={searchOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter,Toolbar]}/>
    </TreeGridComponent>
};
export default App;

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

Search operators

Configure the operator in searchSettings.operator to control how matching is performed.

The following operators are supported in searching:

Operator	Description
startsWith	Checks whether a value begins with the specified value.
endsWith	Checks whether a value ends with the specified value.
contains	Checks whether a value contains the specified value.
equal	Checks whether a value is equal to the specified value.
notEqual	Checks for values not equal to the specified value.

By default, the searchSettings.operator value is contains.

Search by external button

Trigger a search from external UI by invoking the search method.

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    let treegrid;
    const inputStyle = { width: '200px', display: 'inline-block' };
    const onClick = () => {
        const searchText = document.getElementsByClassName('searchtext')[0].value;
        if (treegrid) {
            treegrid.search(searchText);
        }
    };
    return (<div>
    <div className='e-float-input' style={inputStyle}>
        <input type="text" className="searchtext"/>
        <span className="e-float-line"/>
        <label className="e-float-text">Search text</label>
    </div>
    <ButtonComponent id='search' onClick={onClick}>Search</ButtonComponent>
    <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='220' ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter]}/>
        </TreeGridComponent></div>);
}
;
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {

    let treegrid: TreeGridComponent | null;
    const inputStyle : object = {width:'200px', display: 'inline-block'};

    const onClick = () => {
        const searchText: string =
        (document.getElementsByClassName('searchtext')[0] as HTMLInputElement).value;
        if (treegrid) {
            treegrid.search(searchText);
        }
    }
    return (<div>
    <div className='e-float-input' style={inputStyle}>
        <input type="text" className="searchtext" />
        <span className="e-float-line"/>
        <label className="e-float-text">Search text</label>
    </div>
    <ButtonComponent id='search' onClick= { onClick }>Search</ButtonComponent>
    <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='220'
        ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter]}/>
        </TreeGridComponent></div>)
};
export default App;

}

Search specific columns

By default, searching targets all visible columns. To search specific columns, list their field names in searchSettings.fields.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['Search'];
    const searchSettings = { fields: ['taskName', 'duration'] };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={toolbarOptions} searchSettings={searchSettings}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, SearchSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['Search'];
    const searchSettings: SearchSettingsModel = {fields: ['taskName', 'duration']};

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270'
        toolbar={toolbarOptions} searchSettings={searchSettings}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter,Toolbar]}/>
    </TreeGridComponent>
};
export default App;

Refer to the React TreeGrid feature tour for key capabilities. Explore the React TreeGrid example to learn how to present and manipulate data.