Search results

Search

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

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

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Search, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search'];
    render() {
        return <GridComponent dataSource={data} allowSearching={true} toolbar={this.toolbarOptions} height={272}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Search, Toolbar]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

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

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Search, Toolbar,
 ToolbarItems, SearchSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search'];
    public searchOptions: SearchSettingsModel = { fields: ['CustomerID'], operator: 'contains', key: 'Ha', ignoreCase: true };
    render() {
        return <GridComponent dataSource={data} allowSearching={true} toolbar={this.toolbarOptions} searchSettings={this.searchOptions} height={272}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Search, Toolbar]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

By default, grid 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 specified value.
contains  Checks whether a value contains with specified value.
equal  Checks whether a value equal to specified value.
notequal  Checks whether a value not equal to specified value.

Search by external button

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

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { data, employeeData } from './datasource';

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

public clickHandler(){
  let searchText: string = document.getElementsByClassName('searchtext')[0].value;
  this.grid.search(searchText);
}

private grid: Grid;
public inputStyle : Object = {width:'200px', display: 'inline-block'};
    render(){
        return (<div>
        <div className='e-float-input' style={this.inputStyle}>
            <input type="text" className="searchtext" />
            <span className="e-float-line"></span>
            <label className="e-float-text">Search text</label>
        </div>
        <ButtonComponent valur='print' onClick= { this.clickHandler.bind(this)}>Search</ButtonComponent>
        <GridComponent  dataSource={employeeData} height={260} ref={g => this.grid = g}>
                  <ColumnsDirective>
                    <ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='FirstName' headerText='First Name' width='150'></ColumnDirective>
                    <ColumnDirective field='City' headerText='City' width='150'></ColumnDirective>
                    <ColumnDirective field='Country' headerText='Country' width='150'></ColumnDirective>
                </ColumnsDirective>
            </GridComponent></div>)
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Search Specific Columns

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

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridComponent, Inject, ColumnsDirective, ColumnDirective, Toolbar, SearchSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from '../datasource.ts';

class App extends React.Component<{}, {}>{
    private searchSettings: SearchSettingsModel = {fields: ['CustomerID', 'EmployeeID', 'ShipCountry']};
    render() {
        return (<div>
        <GridComponent dataSource={data} height={280} toolbar= {['Search']} searchSettings={this.searchSettings}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' headerText='Customer ID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Toolbar]} />
        </GridComponent>
        </div>)
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Clear search by external button

To clear the searched grid records from the external button, set searchSettings.key property as empty string.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Search, Toolbar,
 ToolbarItems, SearchSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search'];
    public searchOptions: SearchSettingsModel = { fields: ['CustomerID'], operator: 'contains', key: 'Ha', ignoreCase: true };

public clickHandler(){
  this.grid.searchSettings.key='';
}

private grid: Grid;
    render(){
        return (<div>
        <ButtonComponent value='clear' onClick= { this.clickHandler.bind(this)}>Clear Search</ButtonComponent>
        <GridComponent  dataSource={data} allowSearching={true} toolbar={this.toolbarOptions}
        searchSettings={this.searchOptions} height={260} ref={g => this.grid = g}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Search, Toolbar]} />
        </GridComponent></div>)
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));