Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Filtering on a paginated grid makes the paginator go back to the first page
posted

Hi,

I have a grid with a paginator (paging mode: remote) and filterable columns. When I navigate to any page and then attempt to filter its results, the paginator goes back to the first page, quite to my dismay.

As I can see in the code this is done like this by design and there seems to be no way it can be avoided.

My IgniteUI-Angular version is 14.0.7.

I would like to understand what's the reasoning/motivation behind this design decision.

Thanks

Parents
  • 2560
    Offline posted

    Hi César,

    Thank you for posting to Infragistics Community!

    I have been looking into your question and what I can say is that this is the behavior not only with remote paging, but with paging and filtering in general. You are correct that this is by design. An argument in favor of this behavior is that the user would most probably like to see the filtered in results form the start. Furthermore, let’s say that the user is on page 5 when applying a filter. The result set has fewer results, so the filtered data now spans 3 pages only. If the paginator was to remain on page 5, which would not exist at this point, an erroneous behavior would be introduced.

    Having this in mind, it is possible to achieve your requirement with some custom application level code both for the paging within the grid, as well as remote. Here is a StackBlitz sample for the first case. The solution involves handling the filtering and filteringDone events of the grid. In the first one, the current page of the paginator could be stored in a variable and in the second, the page could be navigated to after filtering. There is the logic about navigating to the last available page, in case there were more pages than the saved current page before filtering.


      

    public filtering(event: IFilteringEventArgs) {
        this.pageBeforeFiltering = this.paginator.page;
      }
    
     
    
      public filteringDone(event: IFilteringExpressionsTree) {
        if (this.pageBeforeFiltering <= this.paginator.totalPages) {
          this.paginator.page = this.pageBeforeFiltering;
        } else {
          this.paginator.page = this.paginator.totalPages;
        }
      }
     

    Regarding remote paging with filtering, as you are probably already familiar, most of this functionality is implemented on application level by leveraging the grid API. The Grid Remote Data Operations topic provides sample code and demos on how to get it up and running. Developers could further customize the code in order to implement more specific requirements.

    For your convenience, I have prepared this other sample with remote paging and filtering which also follows the above approach to keep the page on filtering. Please, feel free to modify it according to your proper configuration.

    Please, check the samples out and let me know if they properly address your question.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer

Reply Children