Blazor DataGrid Example - Lazy Load with Virtual Scrolling
This sample demonstrates lazy loading grouping with virtual scrolling feature of the DataGrid component. In this sample, the DataGrid data is grouped against Product Name and Customer ID columns.
Generating Data
Drag a column header here to group its column
Order ID Press Enter to sort | ProductID Press Enter to sort. Press Ctrl space to group | Product Name Press Enter to sort. Press Ctrl space to group | Customer ID Press Enter to sort. Press Ctrl space to group | Units In Stock Press Enter to sort. Press Ctrl space to group |
|---|
| No records to display |
The Blazor DataGrid is rendered by setting the EnableLazyLoading property to true in GridGroupSettings and setting EnableVirtualization property to true. The PageSize property from GridPageSettings and RowHeight property must also be defined. In this demo, initially Product Name and Customer ID columns are grouped, so the grid renders only the caption rows in collapsed state.
When you expand a caption row, the corresponding grouped data, it only loaded in an on-demand basis. This means, instead of buffering the entire grouped data, it only loads relevant data in the view port. This feature allows users to load large amounts of grouped data to the grid without any performance degradation.
More information about the lazy loading grouping feature can be found in this documentation section.