How To Filter Data In Current Page Only

I am using igx-grid. I am retrieving all data in one call, suppose I am on 3rd page, while filtering data it searching the data from the whole data, and it goes to 'Page 1' automat

Solution 1:

Filtering performed on the data in any column of the igx-grid is not an operation which works only on the specific page data, but on the entire data set. If you need only data within the current page to be filtered, then the data within the current page will be less than the page size and the data state in general in the grid will go out of sync.

In order to get the current filtered data on the current page with server-side paging, you can extract the filteringExpressions from the grid and send them in the request for paging to your backend service. Then first filter the data and subsequently page it and return only the page size back. In pseudo code this will look something like:

data.Where(d => d.something meets condition).Skip(page).Take(pageSize)

The result would be something like this: https://stackblitz.com/edit/github-w6x6a7?file=src/app/grid/grid-remote-paging-defaultTemplate-sample/remote-paging-default-template.component.html

Now the grid does reset the pages when client-side filtering is performed, because when filtering the data, the number of pages is reduced and the current page that the user is on may no longer exist.

Examples on the server-side paging and filtering in the igx-grid can be found here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/remote-data-operations