This is a migrated thread and some comments may be shown as answers.

filter a grid by entering a value in an input

4 Answers 379 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Juan
Top achievements
Rank 1
Juan asked on 13 Oct 2016, 12:20 PM

Can anyone help me how to filter a grid by entering a value in an input.

I want that because when the page loads show me all the records in the grid,

and I just want to show me the rows filtered with the input. That's possible?

I saw this example http://demos.telerik.com/kendo-ui/grid/toolbar-template

but in that example the grid brings me all records and i just want to show me the records only when i put a value on a text field.

I will wait for your answers.

4 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 2
answered on 13 Oct 2016, 01:26 PM

If you want to filter the data client-side, that example you linked to is kind of showing you exactly what to do except it is using a DropDownList instead of a text box.  All you need to do is modify the technique to trigger on the your desired event(text box lost focus, a "filter" button click, etc) and apply the filter to the DataSource.

 

If you are using server-side filtering, configure the transport.read.data (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data) to return the current value of the text box.  This will then be passed to your read action on every read.  And then you simply use the passed value to filter your result set appropriately before passing it back for the grid to display.

0
Stephen
Top achievements
Rank 2
answered on 13 Oct 2016, 01:35 PM

If you want client-side filtering, that demo you linked to is essentially showing you exactly what to do except it is using a DropDownList and its change event.

All you need to do is modify it to use your text box and trigger on whatever event you want(text box lost focus, a button click, etc) to apply the contents of the text box as the required filter.

 

If you are using server-side filtering, then just configure the DataSource.transport.read.data (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data) with a function to return the current contents of the text box.  This will then be sent to your server read action on every read.  On the server, you use the passed parameter to filter your result set appropriately before passing it back for display.

0
Stephen
Top achievements
Rank 2
answered on 13 Oct 2016, 01:36 PM
Sorry for the double-post...the Post button is always returning an error so I thought the response was lost.
0
Boyan Dimitrov
Telerik team
answered on 17 Oct 2016, 07:09 AM

Hello,

All operations such as paging, filtering, grouping and etc is performed on DataSource level. In order to explicitly perform a specific operations (filtering in this case) the associated method of the DataSource API should be called (filter method). 

Regards,
Boyan Dimitrov
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Grid
Asked by
Juan
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
Share this question
or