问题
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.
- Grid calls backend api which returns 500 records in 200 seconds.
- The user need to wait for 3+ minutes to see any data on screen.
- Based on infinite row model I thought after the implementation if
cacheBlockSizeis 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. - 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?
- 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
回答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.
来源：https://stackoverflow.com/questions/65018177/ag-grid-community-infinite-row-model-for-server-side-pagination-community-free