Angular Grid - Paging and Filtering issue

[Ant]

Hi,

I'm using a kendo angular grid. For some reason when i filter on a page (other than page 1) it isn't resetting to page 1. Therefore if i filter for something on page 5 for example and there is only one result, the grid appears empty and i'm having to click page 1 to show the row. I'd have thought this should work out-of-the-box or am I required to write some code to reset the paging whenever a fitler is applied?

Using version:

"@progress/kendo-angular-grid": "6.0.1",

 

Thanks

[Ant]

We have implemented filtering differently to the docs (not using filterBy method).

So its going off to the api sending the current page number in the datasource request.

If i change skip to 0 it resets tha paging. This seems to be my solution

[Miroslav]

Hi Ant,

Based on the provided details I am not sure what is the actual configuration of the Grid. That is why I will provide some general information about how the Grid works. 

Assuming that the filterChange event has been used to filter the data and pageChange to update the pages, then the page will not be automatically reset when filtering.

Here a reasonable question is why?

This behavior is expected since the filterChange event doesn't provide information regarding the pages. Thus the developer needs to manually set the skip property of the Grid to 0 in order to bring the user at the beginning of the table when the data is filtered.

In this line of words, what can be done is to utilize the dataStateChange event which allows the developer to handle multiple data operations in a single event handler.

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/#toc-handling-multiple-data-operations 

The demo from the article is broken, that is why I am going to provide the working one:

https://stackblitz.com/edit/angular-fszde6-sb4mtk

The event comes in handy if more than one data operation is enabled. When the Grid is filtered the skip property of the received DataStateChangeEvent is automatically set to 0 which makes the desired behavior out of the box.

The Kendo Grid provides out-of-the-box handling for the data operations when the data is bound through the kendoGridBinding directive. This means that the Grid handles all data operations internally such as filtering, paging, sorting and grouping. The developer doesn't need to handle all of their events. More details regarding this topic can be found here:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/basics/

Here is an example that demonstrates the kendoGridBinding directive in action. Once the data is filtered the page is automatically reset:

https://stackblitz.com/edit/angular-fszde6?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Miroslav
Progress Telerik