Client-Side Filtering with Pager

8 posts, 1 answers
  1. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 27 Jun 2014 Link to this post

    I have a ListView, DataSource and Pager.  The DataSource queries the data from a remote source and there is a total function in the schema for the pager which works fine for the remote query.  The problem I'm having is if I apply a filter to the DataSource client-side, the pager is not updating to the new filtered total and is still using the full dataset total.  The ListView is displaying the filtered results and if I click next on the pager, it exceeds the end of the filtered set and crashes.

    relayDataSource.filter = { field: "MakeModelID", operator: "equals", value: this.value() };

    schema: {
       data: "d",
       total: function(data){
         return data.d.length;
       },

    Is there a way to get the pager to work with client-side filtering on a remote dataSource?  Pager.refresh() doesn't get a filtered total and I prefer to limit the hits on the server by filtering client-side.

    Thanks.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Jul 2014 Link to this post

    Hi Cyndie,

    I tried to reproduce the behaviour in a sample page but to no avail. Could you please check it and let me know what I am missing?

    I also recorded a screen cast: http://screencast.com/t/TVAPpwCmq
    As you can see the dataSource fires requests for paging but does not fire requests for filtering, e.g. the paging is performed server side while filtering occurs on the client.

    On a side note I would not recommend using client side filtering and server side paging as in this case the user will be able to filter only the records which are part of the current page. This behaviour might be confusing.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 01 Jul 2014 in reply to Alexander Valchev Link to this post

    Your demo is with a grid, which may work fine as it has built-in filtering that can be configured.  The problem I'm having is with a ListView, which doesn't have the filtering configuration. 
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Jul 2014 Link to this post

    Hi Cyndie,

    Please accept my apology for the misunderstanding.

    I modified the example so it now uses ListView  with pager but did not manage to reproduce the behavior. Am I missing something? Does the sample matches your scenario, if not could you please modify it?

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 03 Jul 2014 in reply to Alexander Valchev Link to this post

    In trying to edit your example to be configured like mine, I found the issue.

    I was using the following to apply the filter
    relayDataSource.filter = { field: "MakeModelID", operator: "equals", value: this.value() };

    instead of
    relayDataSource.filter({ field: "MakeModelID", operator: "equals", value: this.value() });

    Making that change made the difference.

    Thanks.
  7. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 16 Mar 2015 in reply to Alexander Valchev Link to this post

    Hi Alexander,

    Can you please repost the example with the grid because now both examples are with the listviews. I'm currently struggling preventing requests while client side filtering.
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Mar 2015 Link to this post

    Hello,

    Here you are: http://dojo.telerik.com/@valchev/OLEgU

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Randolph
    Randolph avatar
    3 posts
    Member since:
    Jul 2014

    Posted 15 Nov 2015 Link to this post

    Hi,

     

     So I was looking for an answer to this as well and found a good solution that might help which uses the dataSource.query method. Here is the link for the dojo: http://dojo.telerik.com/elemI

     

    Regards,

    Randolph

     

Back to Top
Kendo UI is VS 2017 Ready