Skip to content

Virtual Scroll

When building applications with long lists of items, rendering them all at once can cause performance issues. Virtual scrolling is a technique used to optimize the rendering of large lists by only rendering items currently visible in the viewport. This significantly improves performance and user experience.

Why Use Virtual Scrolling?

If you have thousands of items in a list, rendering them all at once can:

  • Slow down the application due to excessive DOM nodes.

  • Increase memory consumption as all elements stay in memory.

  • Reduce performance by affecting scrolling smoothness.
  • Virtual scrolling solves these issues by only rendering a subset of items while keeping the scroll behavior intact.

Implementing Virtual Scrolling with jqGrid

The new jqGrid Virtual Scroll is designed for efficiently rendering large lists and tabular data. In principle we use 3 pages in the grid when virtual scroll is enabled. When the gird is initialized we load the first page and pref-etch the second page and store it into the cache. The second page is loaded from server, but not put into the grid. When you begin to scroll we put the second page  in the grid and load the third and so on. The same apply if you scroll up. This way we support variable row height in the data. The virtual scroll should be used carefully and you will need to understand that some features of the grid can not be completed. This is caused by the fact, that the row height is not known and in all cases we use approximate approach to estimate it. Please see the limitations at end.

To setup virtual scroll you will need to setup the following: 

jQuery("#gridid").jqGrid({
    ...
    vScroll : true,
    ...
});

This initializes the virtual scroll and the grid load the first page either from local data or remote server depending on datatype parameter set. Additionally to this there are other parameters that can be fine tuned:

these are

  • rowHeight - integer default value is 30 in pixel - this parameter is used in case we can not get the actual row height. It is a fallback parameter

  • vScrollCacheSize - integer default value is 50 - this parameter stores in cache the number of pages rendered. This is usefull in case not to request too many data from server, in case the user scroll up and down recently

  • vScrollDebounce - integer default value 150 in ms - this is a timer to delay the too many requests to the server in case the user scroll fast.

Room for optimization

  • In case a local data array is used or the response from the server is relative fast you can try to decrease the vScrollDebounce in order to prevent seen of empty space when scrolling.
  • In case you see this empty space when loading relative fast you can try to make the page size little bigger with 5-15 records - i.e. instead of default 20 records per page a you can try with 35-40 records
  • Setting bigger page size is better than little one
  • It is not recommendet to have grid height bigger than page that can fit into it. In this case either decrease the grid height or increase the records per page parameter.

Limitations in virtual scroll

  • Instead of triggering the grid with current page true - i.e to stay in current the grid is reset to the first page.
  • Serarch and sorting reset the grid to the first page
  • When a variable row height is used - i.e you set for the grid cell white-space : normal - it is not recommended to resize the grid columns or if possible to resize only this column, which contain data to fit to one line only
  • The loadComplete function does not run when a cached page is used.
  • In fast scroll mode, since we have debouncer in order to preven to load all pages when fast scroll is on, the function which is called after the fast scroll stop and load page 156 (by example) (calling the loadComplete with this page) and put it in the grid, but pref-etch function loads previous page 155 (since of the fast scroll)( and call loadCoplete with this page) and then correctly load page 157. This only happen on fast scroll.