How To make search filter to apply when typing

Thread ID:	Created:	Updated:	Platform:	Replies:
146626	Aug 11,2019 08:19 PM UTC	Aug 12,2019 09:56 AM UTC	React - EJ 2	1

Subscribe to this post

Tags: Grid

Albert

Asked On August 11, 2019 08:19 PM UTC

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

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On 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() {

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'>

. ..

. . . .

</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.

Reply | Reply with quote

CONTACT US

How To make search filter to apply when typing

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US