Gridx in XPages – 20: Improving Memory Management with Virtual Scrolling

Gridx will render DOM elements for every row in the data store by default, but this can be a very inefficient use of memory and can hurt performance. In this post, I’ll show how to add virtual scrolling to the grid in order to minimize the number of DOM elements required at any given point for displaying the data.

Gridx Series

Gridx in XPages — Entire Series

VirtualVScroller

As the number of rows in the data store increases, you may start to notice more of a lag in rendering the grid. This is because it renders every row in the store. This generates far more DOM elements than you could see on the page at one time, so it’s highly inefficient.

Fortunately, there is an extremely simple way to streamline the amount of rows that are rendered — the VirtualVScroller module.

All you have to do is add it to the grid and it does the work automatically.

1. Require Module

The first thing you need to do is include the VirtualVScroller module in the require statement.

"gridx/modules/VirtualVScroller"

2. Include Module in Grid

To make it available to the grid, add it to the grid’s modules list.

modules: [  
  Resizer,
  NestedSort,
  Filter,
  FilterBar,
  QuickFilter,
  VirtualVScroller
]

3. Define the Buffer Size

Next, you need to define the size of the buffer to maintain in memory. This is specified in the vScrollerBuffSize attribute of the grid.

The buffer size is the amount of rows it will render before and after the rows that you can see in the grid. It defaults to 5, but the documentation says to increase it to 10 or 20 if scrolling isn’t smooth enough. The tradeoff is scrolling smoothness vs the number of rows to render each time.

grid = new Grid(
{
  id: "my_gridX",
  cacheClass: Cache,
  store: store,
  structure: columns,
  vScrollerBuffSize:10,
  modules: [
    Resizer,
    NestedSort,
    Filter,
    FilterBar,
    QuickFilter,
    VirtualVScroller
  ]
});

Results

In my sample grid (with a data store of about 1,300 rows), it was rendering 13,160 DOM elements before the virtual scrolling and only 313 DOM elements after scrolling! It is clear to see how this is a significant boost in efficiency for the grid.

If you want to perform a similar test, you can determine the number of elements by using this statement in the browser console:

document.getElementsByTagName("*").length