Angular Data Grid: SSRM Infinite Scroll
The Server-side Row Model (SSRM) can load rows on demand as the user scrolls down through the rows in the grid using an Infinite Scrolling technique.
Infinite Scroll is useful when there is too much data to be retrieved in a single request from the server.
Note that it is still possible to present large amounts of data inside grid when Row Grouping is applied. For example a dataset could have 10 million rows, but only 200 rows are required at any group level - in this case Infinite Scroll is not needed to show the large dataset.
To enable Infinite Scroll in the SSRM, set the grid property
The example below demonstrates Infinite Scroll in the SSRM. Note the following:
- Infinite Scroll is enabled via the property
- 100 rows are loaded at a time as the user scrolls down through the grid.
It is useful to understand how the grid organises data into caches for Infinite Scrolling as many of the
Configurations are expressed in terms of the Server-Side Cache such as
The grid arranges rows into blocks which are in turn stored in a cache. There is a cache containing the top-level rows (i.e. on the root node) and for each individual Row Grouping level. When the grid initialises, it will retrieve an initial number (as per configuration) of blocks containing rows. As the user scrolls down, more blocks will be loaded.
The example below demonstrates some configurations that are specific to Infinite Scroll. Note the following:
- The grid property
serverSideInfiniteScrolling = true, which turns on Infinite Scrolling. The grid loads rows one block at a time as the user scrolls down.
- The grid property
cacheBlockSize = 50. This sets the block size to 50, thus rows are read back 50 at a time.
- The grid property
maxBlocksInCache = 2. This means the grid will keep two blocks in memory only. To see this in action, scroll past row 100 (which will require a third block to be loaded), then quickly scroll back to the start and you will observe the first block needs to be reloaded.
It may be desirable to scroll through the entire dataset without the need for intermediate blocks to be loaded.
The example below shows how debouncing block loading can be achieved. Note the following:
- The response from the server sets the
rowCountproperty so that the vertical scrollbars bounds are set such that the entire dataset can be scrolled through. In other words, Infinite Scrolling is turned off, however rows are still loaded in blocks.
blockLoadDebounceMillis = 1000- loading of blocks is delayed by
1000ms. This allows for skipping over blocks when scrolling to advanced positions.
- The grid property
debug = true. This means the browser's dev console will show loading block details.
When using the server-side row model the initial scroll position of the grid can be set. This is achieved by calling
api.ensureIndexVisible() after setting the data source to the grid.
It is important that the
serverSideInitialRowCount property is set to a value that is greater than the sum of the row index provided to
api.ensureIndexVisible() and the number of rows displayed in the grid's viewport.
This is demonstrated in the example below, note the following:
serverSideInitialRowCountproperty has been set to provide an initial length to the vertical scrollbars.
- After the datasource has been set
api.ensureIndexVisible(5000, 'top')is called, causing the grid to scroll down to row
When experimenting with different Infinite Scroll Configurations it can useful to enable debug mode as follows:
<ag-grid-angular [debug]="debug" /* other grid options ... */> </ag-grid-angular> this.debug = true;
The screenshot below is taken from the browser's dev console when
debug is enabled:
Notice that the current cache status is logged showing block details such as the
This can be very useful when debugging issues on the server.
Infinite Scroll allows displaying a large amount of data by breaking it into blocks and lazy loading the blocks as the users scrolls. However, it comes with the following restrictions.
- In Grid Sorting Because data is read back in blocks, the grid cannot sort the data, as it does not have all the data loaded. All sorting must be done on the server as described in Sorting.
- In Grid Filtering Because data is read back in blocks, the grid cannot filter the data, as it does not have all the data loaded. All filtering must be done on the server as described in Filtering.
Updating Data Updating data in the grid using Transactions is not supported when Infinite Scrolling.
This is because applying updates would potentially move rows between blocks, which would not be possible if all blocks are not loaded.
Changing Data If data on the server is changing with regards inserts and deletes, this will cause problems with the Infinite Scroll. This is because data is read back from the server in blocks. If the data is receiving updates or deletes, then what block a particual row should be in can change. For example consider the following scenario:
- The grid asks for rows 0 to 99 (i.e. first block of 100 rows) and these get read from a database.
- Another application inserts a row at index 50.
- The grid asks for rows 100 to 199 (the second block of 100 rows) and again these get read from the database.
In this scenario the grid will have the last row in the first block appear again as the first row in the second block. This is because the row was at index 99 before the insert and then at index 100 after the insert.
If data is changing such that row indexes will change and result in duplicate or missing rows across blocks, then it is best either avoid Infinite Scrolling or use a snapshot of data to prevent data updates.
Continue to the next section to learn about SSRM Row Grouping.