This sample highlights row and column virtualization in the Grid component, allowing efficient rendering and smooth scrolling of large datasets with excellent performance, along with full CRUD support and column templates.
The virtual scrolling feature in the Grid renders only the rows and columns that are currently visible in the viewport, rather than loading the entire dataset into the DOM. This approach significantly improves performance when working with large data sources by reducing the number of DOM elements.
To enable row virtualization, set the
enableVirtualization
property to true. For column virtualization, set the
enableColumnVirtualization property to true. When using virtualization, it is essential to define the height
property so that the Grid
can accurately calculate the number of visible rows. For seamless scrolling, set args.enableSeamlessScrolling as true in the Grid's load event. This ensures smooth vertical and horizontal transitions, providing a smoother experience during fast scrolling when virtualization is enabled.
In this example, click the "Load 100K Data" button to bind a dataset containing 100,000 rows and 30 columns. Then, scroll vertically and horizontally to experience the virtualized rendering in action. Full data editing support is available with the virtualization feature.
Injecting Module:
Features of the Grid component are organized into individual, feature-specific modules. To use the virtual scrolling functionality, inject the VirtualScroll module into the services.
For more detailed information about virtual scrolling, refer to this documentation.