Example of DOM Virtualization in ASP.NET MVC Data Grid Control
This demo showcases the DOM Virtualization feature in the Grid, enabling efficient handling of large datasets. Instead of rendering all records at once, the Grid intelligently displays only the rows visible within the viewport, ensuring smooth scrolling and responsive performance.
DOM virtualization is a performance optimization feature that renders only the visible rows within the Grid viewport instead of rendering the entire dataset. This significantly improves performance when working with large volumes of data.
With this feature enabled, the Grid calculates the content height and renders only the necessary tr elements required for the visible portion of the Grid. As the user scrolls, previously rendered rows are replaced with newly required rows, ensuring that only a minimal number of DOM elements are maintained at any time. This behavior improves both rendering speed and memory usage, making the Grid highly efficient for large datasets.
DOM virtualization can be enabled by setting the enableDomVirtualization property to true. In this demo, the Grid is loaded with "100k" records using both DOM virtualization and row virtualization features. Row virtualization is enabled using the enableVirtualization property.
More information on the infinite scrolling can be found in the documentation section.
Looking for the full ASP.NET MVC Data Grid component overview, features, pricing, and documentation? Visit our ASP.NET MVC Data Grid component page.