Paging issues when doing server side paging with custom filter

3 Replies
2 Participants

Created by
DL DSI Licensing

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
Grid

Created On
Jun 30, 2025 12:24 PM UTC

Last Activity On
Jul 3, 2025 12:21 PM UTC

Want to subscribe?
SIGN IN

Hi,

I'm using syncfusion ej2 v26.1.35. I'm using a grid to diplay my customers with paging enabled and the following initial pageSettings:

pageSettings: PageSettingsModel = {
  pageSizes: [5, 10],
  pageSize: 5,
  pageCount: 3
};

The dataSource property of the Grid is binded to a variable that is initialized in the ngOnInit of my component for the first time. Then data is reloaded from server at each dataStateChange event trigger. From the event arguments I retrieve the skip / take data needed to do the server side paging. My event implementation looks like:


onGridDataStateChange(args: DataStateChangeEventArgs) {
  this.lastStateChangeArgs = args; 
  getData(args.skip, args.take); //sets a new dataSource
}

The server returns an object of type

  myDataSource = { result: [], count: number }

where result is the list of items for the current page and count is the total count of objects, so that the Grid can calculate the number of pages etc...

I also have a custom filter outside the grid, for the sake of simplicity lets say it is just a simple textbox to filter my Customers by their Name when I click on my "Filter" button. The event is implemented like that:

filterClick() {
  getData(this.lastStateChangeArgs.skip, this.lastStateChangeArgs.take);//sets a new dataSource
}

My issue:

- initially lets say without any filter the ngOnInit data is 5 customers for a total count of 9. Everything runs fine

- then I set a filter for the name "John" and click the "Filter" button. The data source of the Grid is now updated to 3 customers for a total of 3 and it runs fine

- but when I reset my filter and call my server again to update the dataSource with the same initial dataSource, something weird happens: dataStateChange event is triggered with a "paging" event where take is equal to the count of the dataSource (9), and same for the pageSize (9). When I did not at all change the pagesize or anything. Moreover, as I say inside this event I call again my server to retrieve the data, wich triggers another dataStateChange event, wich updates the datasource, wich triggers the event (only 2 times...). So here my server is called 3 times: first time with a correct take of 5, then 2 more times with a wrong take/pageSize of 9. At the end, even if the grid displays a pageSize of 5, it shows 9 elements and everythin is messed up.

- from now on, each time I try to filter my data, the take/pageSize is set to the "count" property of the dataSource

Can you explain to me why the dataStateChange event is triggered somewhat randomly when I update the grid's dataSource, and why it's doing so with a wrong take/pageSize ? Is there a way to prevent this very weird behavior ?

Thank You,

Mehdi

3 Replies

SR Sivaranjani Rajasekaran Syncfusion Team July 1, 2025 02:07 PM UTC

Hi Mehdi,

Greetings from Syncfusion support!

We understand that you're using custom data binding with the Syncfusion EJ2 Angular Grid, and you're encountering an issue where the dataStateChange event is triggered multiple times—with an unexpected pageSize equal to the total count—after resetting a custom filter.

After reviewing your shared details and implementation, we suspect that in your filterClick() method, you're directly replacing the Grid’s dataSource instead of using the Grid's built-in column filtering mechanism. When you do this, the Grid internally assumes that the data has changed and may adjust its paging behavior accordingly.

This occurs because the Grid assumes it's receiving a fully filtered dataset, not as raw data to be filtered again. Additionally, when the new dataSource is set without properly maintaining pageSettings, the Grid attempts to recalculate it based on the new data length.

To externally filter a column, we recommend using the Grid’s filterByColumn method instead of directly modifying the dataSource. This ensures the Grid handles the filter action properly and keeps paging intact.

In custom binding mode, all Grid actions like sorting, filtering, paging, etc., are handled manually via dataStateChange. So it is important to:

Maintain a consistent state object
Update the query or where clauses accordingly

We’ve prepared a working sample where filtering is applied externally using the recommended approach. Filtering and resetting both work correctly, and dataStateChange is triggered only once per action.

Please refer to the code below for more information:

Code Example:

<input type="text" #filterInput />

<button (click)="onClick(filterInput.value)">Filter</button>

<button (click)="clearFilter(filterInput)">Reset</button>

onClick(value: string): void {

this.grid.filterByColumn('CustomerID', 'contains', value);

}

clearFilter(input: HTMLInputElement): void {

input.value = ''; // Clear the input

this.grid.clearFiltering();

}

Sample Link : https://stackblitz.com/edit/angular-lduxcndp?file=src%2Fapp.component.ts,src%2Fapp.component.html

Documentation Link : https://ej2.syncfusion.com/angular/documentation/grid/filtering/filtering

If you are still experiencing the issue, we kindly request you to share additional details to help us investigate and assist you further.

Grid Configuration : Can you please share the complete Grid rendering code?
Custom Binding and Filtering Logic : How have you implemented the dataStateChange method? Please sharehow you manage and store the state object within this method. What logic is executed in your external filterClick() and reset functions? How do you update the Grid’s dataSource within these functions?

Service and Server-side Logic: Can you share the code for your data service, especially the part where server-side operations are handled?
Reproducible Sample : Can you provide a runnable sample that reproduces the issue? Alternatively, are you able to replicate the issue using the sample we previously shared?

Once we have the above information, we will review everything thoroughly and get back to you with a prompt and precise solution.

Regards,

Sivaranjani R

DL DSI Licensing July 2, 2025 03:12 PM UTC

Hi Sivaranjani , and thank you for your answer and sample,

First of all, yes you are right:

I'm using custom databinding and you spotted the issue exactly
I'm directly replacing the dataSource, that's because I dont want to use the builtin filter features

Still I could not understand why the grid would alter it's paging settings when updating the datasource. So based on your sample, I created a new one that looks exactly like my actual project/component. And on this sample, no issue at all. So I checked the syncfusion version you were using, and it's the 30.1.7. As I said earlier, we are using currently the 26.1.35.

I created a second sample using this earlier version, and now the "bug" (I assume it's a bug) occurs in the same way as in my application.

You can try that yourself, here are the samples:

To reproduce the issue:

type "ch" in the filter input
click on the filter button
you'll get 5 items total and paging is still fine on both versions
type "c" in the filter input
click on the filter button
you'll get as expected more items total: 26

With the v30 sample, the paging wil still be ok:

the grid will display 6 pages of 5 elements
only 5 éléments are displayed

With the v26 sample, the paging is wrong:

the grid will display only 1 page
all 26 elements will be displayed, when the items per page is still 5
the issue is reproduced here, the dataStateChange event has been triggered with a pageSize equal to 26

On my real project, I upgraded the syncfusion packages to v30.1.7 and now the weird behaviour of pageSize being set to the total count of the query result is gone. This clearly looks like a bug to me with v26.

What do you think ? Is my usage of the grid component still improper or is it ok ?

Thanks,

Mehdi

SR Sivaranjani Rajasekaran Syncfusion Team July 3, 2025 12:21 PM UTC

Mehdi,

Thank you for sharing the details and a detailed explanation!

We reproduced the paging issue in Syncfusion Grid v26.1.35 (sample), where filtering with "c" incorrectly sets the pageSize to 26, displaying all items on one page. The v30.1.38 sample (sample) works correctly, showing 6 pages of 5 items. Therefore, we highly recommend upgrading to the latest version to take advantage of this feature and benefit from numerous bug fixes and enhancements.

Please refer to the below steps:

Steps to Upgrade Syncfusion Packages:

Backup your old Syncfusion packages(node_modules>@syncfusion).
Delete the package.lock.json file from your application.
Remove the @syncfusion package folder from the node_modules directory.
Use the latest version or “*” (which installs the latest packages) for all Syncfusion components in package.json file.
Then install the NPM packages.