Grid, Filter and Page

5 posts, 0 answers
  1. Emanuele
    Emanuele avatar
    16 posts
    Member since:
    Apr 2014

    Posted 19 Aug 2014 Link to this post

    Hi,
     I use  Kendo UI with Angularjs, I have a grid with datasource calling remote web api and wih just server paging active (in backend I have to call a third part web service with page parameter). I want to use sort and filter on client side. Sort on columns works excellent but when i change page and try to filter on a column value in that page (the second or more), the datasource call again my backend passing page=1 and not the page's number in which i use the filter. I have to build a more advanced filter on the page so i need that filter on columns works locally without changing the page. Sort call WS with the same page's number. A workaround could be passing the current page in a different parameter to the WS, eventually could you help me with that?

    Thanks
  2. Emanuele
    Emanuele avatar
    16 posts
    Member since:
    Apr 2014

    Posted 20 Aug 2014 Link to this post

    Any Help?
  3. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 20 Aug 2014 Link to this post

    Hello Emanuele,

    The Kendo UI DataSource resets the current page to 1 during filtering by design and this behavior cannot be avoided. The idea is that a subset of the data items will be displayed, so the number of pages will be smaller and the current page may even not exist after the filtering.

    If you require the filtering to work on the current page without making any requests to the web service, you can perform the filtering manually - retrieve all current data items, check the desired values and hide the table rows, which should not be displayed. Here are some relevant documentation links.

    - get the Grid dataSource
    http://docs.telerik.com/kendo-ui/api/web/grid#fields-dataSource

    - get all data items from the current page
    http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-view

    - get the value of a given field of a given data item
    http://docs.telerik.com/kendo-ui/api/framework/model#methods-get

    - get the table row, which corresponds to a data item - use the data item's UID and construct a jQuery selector, having in mind that the UID is rendered as a data-uid HTML attribute of the table row.
    http://docs.telerik.com/kendo-ui/api/framework/model#fields-uid

    An alternative approach would be to iterate the table rows and retrieve each row's data item separately. This will spare you the need to look for the table row, based on the data item's UID.

    - retrieve all table rows
    http://docs.telerik.com/kendo-ui/api/web/grid#fields-tbody

    - retrieve the data item from the iterated table row
    http://docs.telerik.com/kendo-ui/api/web/grid#methods-dataItem

    - etc.

    There are a couple of things to keep in mind. First, you will either need to use custom filtering UI, instead of the Grid filtering UI, or use the native filtering UI, but cancel the rebind (server request) in the Grid's dataBinding event.

    http://docs.telerik.com/kendo-ui/api/web/grid#events-dataBinding

    function onDataBinding(e) {
       e.preventDefault();
       var filterSettings = e.sender.dataSource.filter();
    }

    Cancelling the dataBinding event is not straightforward, because the same event is also fired when paging and sorting, so you need to figure out what the user has done. This can be achieved if you save the sorting, filtering and paging state of the dataSource in the dataBound event and compare it with the state in the dataBinding event.

    Also, since the Grid is not aware that it is "filtered", you will need to execute the above routine again after each paging if you want to persist the fake filtered state.

    In general, you need to have the correct mindset that all the above techniques represent a hack, so if possible, consider using some other approach, which is supported out of the box.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Marco Lopez
    Marco Lopez avatar
    1 posts
    Member since:
    Jul 2016

    Posted 27 Jun 2017 in reply to Dimo Link to this post

    Hi Demo,

    We are using Kendo UI Grid Q2 2016 and are seeing the issue described above by Emanuele.

    We are using client side filtration and server side paging. We need to be able to filter results on current page but Kendo is setting us back to page 1. Has this issue been fixed? Is there a simple work around?

    Thank you,

    Marco

  5. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 29 Jun 2017 Link to this post

    Hi Marco,

    All data operations in the Kendo UI DataSource are intended to be performed at the same place (client or server). Although there is a possibility to configure mixed data operations, this is a non-supported legacy.

    http://docs.telerik.com/kendo-ui/framework/datasource/overview#mixed-data-operations-mode

    Frankly speaking, we have no plans to alter the discussed behavior and I am afraid there is no workaround that we can offer.

    Can you please describe how do you envisage client filtering plus server paging to work? We might be missing something. Here is an example - imagine a page size of 5 and two pages with the following items:

    (first page)

    item 1
    item 2
    item 3
    item 4
    item 5

    (second page)

    item 6
    item 7
    item 8
    item 9
    item 10


    Let's assume that the user is on the second page and filters to show only items that are "greater than" 7. I suppose that the desired result is the Grid to remain on the second page and show just the three items that match the filtering criteria:

    (second page)

    item 8
    item 9
    item 10


    So now my question is - what should happen if the user navigates to page 1, where there are no items that match the criteria?


    Regards,
    Dimo
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top