How To make search filter to apply when typing

[Albert]

Hi ,

Is there a way to mandate search field that searches through all columns in grid, to instantly affect the rows instead of pressing enter?

Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi Albert,  

Greetings from Syncfusion. 

Bind a keyup event on the search toolbar element. In the dataBound event, bind a keyup event to the toolbar element. Later, in the search element handler call the search method of the Grid. Refer to the following code example.  

    import { render } from 'react-dom'; 

import './index.css'; 

import * as React from 'react'; 

import { GridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, Inject } from '@syncfusion/ej2-react-grids'; 

import { categoryData } from './data'; 

import { SampleBase } from './sample-base'; 

export class Searching extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.toolbarOptions = ['Search']; 

    } 

    dataBound() { 

      const proxy = this; 

      this.element.querySelector('#' + this.element.getAttribute('id') + '_searchbar').addEventListener('keyup', function(e){ 

        this.closest('.e-grid').ej2_instances[0].search(this.value); 

      }); 

      } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section row'> 

                    <GridComponent dataSource={categoryData} toolbar={this.toolbarOptions} dataBound={this.dataBound} allowPaging={true}> 

                   . .. 

                     . . . . 

                        <Inject services={[Toolbar, Page]}/> 

                    </GridComponent> 

                </div> 

 

            </div>); 

    } 

} 

 

render(<Searching />, document.getElementById('sample')); 

We have prepared a sample that can be referred here.  

https://stackblitz.com/edit/react-wdarrs?file=index.js 

Regards,  

Seeni Sakthi Kumar S.