I'm working on an Angular project using the AG-Grid free edition to display data. Since server-side pagination is unavailable in the free edition, I use the infinite row model with pagination instead.
In the demo below, I have a mock service that simulates backend data retrieval. The getData (backend) method expects an offset and a limit (page size). My understanding is that when I change the page size in the UI, I need to update the grid's options (page & cache block sizes) programmatically too. However, when I do so, the grid triggers the getRows function twice. This issue does not occur when I navigate to the next or previous pages.
Could you please help me fix this behavior to avoid duplicate calls to the backend? or am I missing something on how the grid works?
According to the document:
/**
* Triggered every time the paging state changes. Some of the most common scenarios for this event to be triggered are:
*
* - The page size changes.
* - The current shown page is changed.
* - New data is loaded onto the grid.
*/
onPaginationChanged?(event: PaginationChangedEvent<TData>): void;
The first call occurs when the page size changes. Inside the function onPaginationChanged, gridApi.updateGridOptions() updates the data (you can find the logic inside this function on the GitHub repo), which also triggers onPaginationChanged, and the gridApi.updateGridOptions() is called a second time. However, the page size is not changing this time, so we can see that createDataSource has been called twice.
The easy way to fix this is to skip getting data when the page size changes. And here is my solution