Grid, Filter and Page

[Emanuele]

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

[Emanuele]

Any Help?

[Dimo]

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

 

 

[Marco Lopez]

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

[Dimo]

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