DOM virtualization is a performance optimization feature that renders only the visible rows within the Tree Grid viewport instead of rendering the entire dataset. This significantly improves performance when working with large volumes of hierarchical data.
With DOM virtualization enabled, the Tree Grid calculates the content height and renders only the necessary tr elements for the visible portion of the control. 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 improves rendering speed and memory usage for large datasets. DOM virtualization is enabled by setting the enableDomVirtualization property to true. This demo loads 100,000 hierarchical records using DOM virtualization. Row virtualization is enabled using the enableVirtualization property. Injecting Module: Features of the Tree Grid component are organized into individual, feature-specific modules. To use DOM virtualization, inject the module using Tree Grid.Inject(DomVirtualization). More information on DOM virtualization can be found in the documentation section. Looking for the full TypeScript Tree Grid component overview, features, pricing, and documentation? Visit our TypeScript Tree Grid component page.