Searching in React Tree Grid component

08 Apr 2021 / 4 minutes to read

You can search records in a TreeGrid, by using the search method with search key as a parameter. This also provides an option to integrate search text box in treegrid’s toolbar by adding search item to the toolbar.

To search records, inject the Filter module in the grid.

Source

Preview

App.tsx

App.jsx

index.jsx

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 './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search'];

    public render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={this.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>
    }
}

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.toolbarOptions = ['Search'];
    }
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={this.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>;
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Initial search

To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the searchSettings.

Source

Preview

App.tsx

App.jsx

index.jsx

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 './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search'];
    public searchOptions: SearchSettingsModel = {
        fields: ['taskName'],
        ignoreCase: true,
        key: 'plan',
        operator: 'contains'
    };
    public render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
         height='270' toolbar={this.toolbarOptions} searchSettings={this.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>
    }
}

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.toolbarOptions = ['Search'];
        this.searchOptions = {
            fields: ['taskName'],
            ignoreCase: true,
            key: 'plan',
            operator: 'contains'
        };
    }
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={this.toolbarOptions} searchSettings={this.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>;
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

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

Search operators

The search operator can be defined in the searchSettings.operator property to configure specific searching.

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

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

Source

Preview

App.tsx

App.jsx

index.jsx

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 './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{

    public treegrid: TreeGrid | null;
    public inputStyle : object = {width:'200px', display: 'inline-block'};

    public onClick(){
        const searchText: string =
        (document.getElementsByClassName('searchtext')[0] as HTMLInputElement).value;
        if (this.treegrid) {
            this.treegrid.search(searchText);
        }
    }
    public render() {
        this.onClick = this.onClick.bind(this);
        return (<div>
        <div className='e-float-input' style={this.inputStyle}>
            <input type="text" className="searchtext" />
            <span className="e-float-line"/>
            <label className="e-float-text">Search text</label>
        </div>
        <ButtonComponent id='search' onClick= { this.onClick }>Search</ButtonComponent>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='220'
            ref={g => this.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>)
     }
}

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 './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.inputStyle = { width: '200px', display: 'inline-block' };
    }
    onClick() {
        const searchText = document.getElementsByClassName('searchtext')[0].value;
        if (this.treegrid) {
            this.treegrid.search(searchText);
        }
    }
    render() {
        this.onClick = this.onClick.bind(this);
        return (<div>
        <div className='e-float-input' style={this.inputStyle}>
            <input type="text" className="searchtext"/>
            <span className="e-float-line"/>
            <label className="e-float-text">Search text</label>
        </div>
        <ButtonComponent id='search' onClick={this.onClick}>Search</ButtonComponent>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='220' ref={g => this.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>);
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

}

Search Specific Columns

By default, treegrid searches all visible columns. You can search specific columns by defining the specific column’s field names in the searchSettings.fields property.

Source

Preview

App.tsx

App.jsx

index.jsx

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 './App.css';
import { sampleData } from './datasource';

export default class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search'];
    private searchSettings: SearchSettingsModel = {fields: ['taskName', 'duration']};

    public render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270'
         toolbar={this.toolbarOptions} searchSettings={this.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>
    }
}

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.toolbarOptions = ['Search'];
        this.searchSettings = { fields: ['taskName', 'duration'] };
    }
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' toolbar={this.toolbarOptions} searchSettings={this.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>;
    }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Contents

Initial search
Search operators
Search by external button
Search Specific Columns

Contents

Initial search
Search operators
Search by external button
Search Specific Columns