ag-grid-community : Infinite Row Model for Server Side Pagination,Community Free Version agGrid -Not working like server side pagination

Question

I have spent good enough time on this to understand and implement but seems either the documentation is not written very clearly or am failing to understand some basic thing.

Using ag-grid-community 22.1.1 , can't change lot of backend code so suggestions for changed on backend would not work. The best option I could see is infinite row model as they explained.ag-grid official documentation

As per above picture, If my backend API is slow and returns data slowly which I cannot help much because it in turns call some external api outside of my control returns slow responses.

1. Grid calls backend api which returns 500 records in 200 seconds.
2. The user need to wait for 3+ minutes to see any data on screen.
3. Based on infinite row model I thought after the implementation if cacheBlockSize is 50 then I could ask server to send 50 records and the response to see the data on grid will be faster and when clicked next it will fetch next 50 and the time for each block would be 20 seconds.
4. But it is not working like that, the backend http call is waiting for all the records to come back and then only it starts rendering grid and show up any result so still have to wait 200 seconds to see any data. So what is the point of calling this infinite scrolling as server side?
5. Also, my implementation is correct as I could see the cursor moving in chrome dev tools from 0-50 first time and then 50-100

Bly

Answer 1

You wrote that you can't change a lot of backend code, so I'm not sure if you can do something like this, but you'll have to define a datasource object with a getRows() at least. That callback will be called every time the grid tries to fetch new rows from the server, and it takes the parameters seen here.

When this callback fires, you'll have to call your Promise function which retrieves your data with the params.startRow parameter, and either the params.endRow or the cacheBlockSize which is 50 as you say.

If the fetch is successful, you then call successCallback(rowsRetrievedOnThisFetch, lastRow), where lastRow is the index of the last row of your data if all of your data is in the grid. If not all data is in the grid yet, set lastRow equal to undefined, null, or -1.

Later, when all 500 rows are loaded, you can set lastRow = 500 and call successCallback(rowsRetrievedOnThisFetch, 500).

This works if you can fetch data in blocks rather than all at once. Each time you call the fetch function you'll have to specify the range of rows you wish to fetch from the database. But you can only do that if your API supports this.

Also, when using the infinite row model the grid won't filter or sort rows on its own. You'll have to pass params.filterModel and params.sortModel respectively in your query when getRows() fires if you want to use server-side filtering and sorting.

---

UPDATE

Take a look at this example: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. It loads 500 rows in batches of 50. Every time you scroll down, the next 50 rows are loaded until all 500 are in the grid.

Tosha

Implemented similarly but still the block thing you said is not working like that, it waits for the response from client not for a block but all records. – Bly

Thank you, can see your plnkr is working as expected, i have written similar in angular. I kept logs and i could see it is printing in my logs like 0-50 records and then 50 to 100 and i can see different values but my grid only starts rendering when it receives all the record from backend taking lot of time....there are no network calls when i click on next although the grid view shows undefined and then rows populate after fraction of second but no calls to backend....and client side i could see it is going inside get rows – Bly

so far it is the only working example I found on internet. Thank you! – Scamper