If you look at the following image, especially the vertical scrollbar, it appears that all of the records (25,000) are loaded with 25,000 DOM row elements.
However, the Tree Grid will render only 150 row elements of the DOM. It won’t render the other row elements during the initial rendering, because the viewport is relatively small and limited. As a result, we lighten the browser’s load by minimizing the DOM elements and rendering elements only when we need them.
The Tree Grid renders the rows on demand when a user scrolls. Hence, it looks like a normal scrolling feature, but actually, the rows are rendered on-demand.
We provide the following two modes of virtualization:
- Virtual scrolling: Loads the row elements when the user begins to scroll.
- Infinite scrolling: Loads the row elements when the scroll bar reaches the end of the page.
Now I’ll go over the behavior of each of these modes.
To provide a better experience, we render elements not only for the current viewport but also for the upcoming viewport. For example, we will render the set of row elements for the next three pages along with the current viewport.
By default, the Tree Grid renders 50 row elements for a viewport. You can customize this by using the pageSize property in the pageSettings.
Most of us are familiar with how scrolling works on the Facebook webpage. This is a good example of infinite scrolling mode.
Whenever the user moves the scrollbar to the end of its track, Tree Grid will start to load the next set of row elements until all the records are rendered.
To use Infinite scrolling, set the enableInfiniteScrolling property to true and inject the InfiniteScroll module in the Tree Grid.
| Without Virtualization (Normal Scrolling) | Virtual Scrolling | Infinite Scrolling |
| 6994 ms | 644 ms | 912 ms |
If you do not have a Syncfusion license, and you would like to try the Tree Grid component, you can download our free trial.