Blazor DataGrid Example - Lazy Load with Infinite Scrolling
This sample demonstrates lazy load grouping with infinite scrolling in DataGrid component. In this sample, the DataGrid data is grouped against Product Name column.
Order ID | ProductID Press Ctrl space to group | Product Name Press Ctrl space to group | Customer ID Press Ctrl space to group | Units In Stock Press Ctrl space to group |
|---|
The Blazor DataGrid is rendered by configuring the following properties:
- Set the EnableLazyLoading property to true in the GridGroupSettings.
- Set the EnableInfiniteScrolling property to true.
In this demo, the Product Name column is initially grouped, resulting in the grid rendering only the caption rows in a collapsed state.
When you expand a caption row, the corresponding grouped data is loaded on-demand. This approach avoids buffering grouped data. Instead, it loads only the relevant data and appends it to the already generated data within the viewport. This feature allows users to load a significant amount of grouped data as the scrollbar reaches the end of the scroller, without any performance degradation.
In this demo, the next set of data is loaded based on the PageSize property within the GridPageSettings.
It's important to note that the Height property must be defined when enabling EnableInfiniteScrolling.
For further information about the lazy load grouping with infinite scrolling feature, please refer to the documentation section dedicated to this topic.