We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How To make search filter to apply when typing

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?


1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 12, 2019 09:56 AM UTC

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() { 
        this.toolbarOptions = ['Search']; 
    dataBound() { 
      const proxy = this; 
      this.element.querySelector('#' + this.element.getAttribute('id') + '_searchbar').addEventListener('keyup', function(e){ 
    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]}/> 
render(<Searching />, document.getElementById('sample')); 

We have prepared a sample that can be referred here.  

Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon