filter a grid by entering a value in an input

5 posts, 0 answers
  1. Juan
    Juan avatar
    22 posts
    Member since:
    Oct 2016

    Posted 13 Oct Link to this post

    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.

  2. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 13 Oct in reply to Juan Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 13 Oct in reply to Juan Link to this post

    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.

  5. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 13 Oct Link to this post

    Sorry for the double-post...the Post button is always returning an error so I thought the response was lost.
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Oct Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready