Lazy Load Grouping in ASP.NET Core Data Grid

7 Sep 20269 minutes to read

The Data Grid supports lazy load grouping, which optimizes the rendering of large datasets by loading only the required grouped data on demand. Initially, only the top-level group caption rows are rendered in a collapsed state. Child rows are fetched and displayed dynamically when a group is expanded.

To enable this feature, set the groupSettings.enableLazyLoading property to true.

The following example demonstrates configuring lazy load grouping using the groupSettings.enableLazyLoading property.

CSHTML

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowPaging="true" allowGrouping="true" height="350px">
    <e-grid-groupSettings enableLazyLoading="true" columns="@(new string[] {"ProductName", "CustomerName"})"></e-grid-groupSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="160"></e-grid-column>
        <e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerName" headerText="Customer Name" width="160"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

lazy-load.cs

public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

Configure server-side lazy load grouping

When using the lazy load grouping feature of the Data Grid, the UrlAdaptor of DataManager is used to handle server-side operations, including lazy load grouping. Along with the default server request, this feature will additionally send the following details to handle the lazy load grouping:

Property Name	Description
isLazyLoad	Used to differentiate the default grouping and lazy load grouping
onDemandGroupInfo	Contains the details of expanded caption row grouping level, skip, take and filter query of the child records

On the server side, these parameters can be accessed through the DataManagerRequest model to handle data retrieval based on the expanded group context. The following screenshots illustrate these request parameters.

The following code example demonstrates handling lazy load grouping on the server along with other grid actions.

public IActionResult UrlDataSource([FromBody] DataManagerRequest dataRequest)
{
    IEnumerable groupedData = null;
    IEnumerable<Customers> dataSource = customers;
    DataOperations operation = new DataOperations();

    if (dataRequest.Search != null && dataRequest.Search.Count > 0)
    {
        dataSource = operation.PerformSearching(dataSource, dataRequest.Search);  //Search
    }
    if (dataRequest.Where != null && dataRequest.Where.Count > 0) //Filtering
    {
        dataSource = operation.PerformFiltering(dataSource, dataRequest.Where, dataRequest.Where[0].Operator);
    }
    int count = dataSource.Cast<Customers>().Count();
    if (dataRequest.IsLazyLoad == false && dataRequest.Sorted != null && dataRequest.Sorted.Count > 0) //Sorting for grouping
    {
        dataSource = operation.PerformSorting(dataSource, dataRequest.Sorted);
    }   
    if (dataRequest.IsLazyLoad == false && dataRequest.Skip != 0)
    {
        dataSource = operation.PerformSkip(dataSource, dataRequest.Skip); // Paging
    }
    if (dataRequest.IsLazyLoad == false && dataRequest.Take != 0)
    {
        dataSource = operation.PerformTake(dataSource, dataRequest.Take);
    }
    if (dataRequest.IsLazyLoad)
    {
        groupedData = operation.PerformGrouping<Customers>(dataSource, dataRequest); // Lazy load grouping
        groupedData = operation.PerformSorting(groupedData, dataRequest); // Sorting with Lazy load grouping
        if (dataRequest.OnDemandGroupInfo != null && dataRequest.Group.Count() == dataRequest.OnDemandGroupInfo.Level)
        {
            count = groupedData.Cast<Customers>().Count();
        }
        else
        {
            count = groupedData.Cast<Group>().Count();
        }
        groupedData = operation.PerformSkip(groupedData, dataRequest.OnDemandGroupInfo == null ? dataRequest.Skip : dataRequest.OnDemandGroupInfo.Skip);
        groupedData = operation.PerformTake(groupedData, dataRequest.OnDemandGroupInfo == null ? dataRequest.Take : dataRequest.OnDemandGroupInfo.Take);
    }
return dataRequest.RequiresCounts ? Json(new { result = groupedData == null ? dataSource : groupedData, count = count }) : Json(dataSource);
}

For optimal performance, especially when dealing with lazy loading grouping, it is recommended to perform sorting after the grouping action.

Lazy load grouping with infinite scrolling

Lazy load grouping with infinite scrolling is especially useful when presenting grouped data from large datasets. It allows data to be loaded on demand as groups are expanded or the scrollbar advances, ensuring efficient handling of records. This approach improves performance, maintains responsiveness, and efficiently handles extensive grouped data.

Lazy-load grouping workflow:

1. Initially, only top-level group caption rows are rendered in a collapsed state.

2. Child rows are fetched and displayed dynamically when a group caption is expanded.

3. Infinite scrolling loads additional data as the scrollbar reaches the end, maintaining seamless navigation.

To enable this feature, set both groupSettings.enableLazyLoading and enableInfiniteScrolling properties to true.

The following example demonstrates configuring lazy load grouping with infinite scrolling using these properties.

CSHTML

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" enableInfiniteScrolling="true" height="350px" allowGrouping="true">
    <e-grid-groupSettings enableLazyLoading="true" columns="@(new string[] {"ProductName", "CustomerName"})"></e-grid-groupSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="160"></e-grid-column>
        <e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerName" headerText="Customer Name" width="160"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

lazy-load-grouping-scroll.cs

public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

• The enableInfiniteScrolling property is optional and can be set to true or false based on the requirement.
• When enabling the enableInfiniteScrolling feature, it is necessary to define the height property.

Lazy load grouping with virtual scrolling

The Data Grid supports lazy load grouping with virtual scrolling to efficiently manage and display large grouped datasets. This feature improves performance, reduces initial load time, and ensures a responsive data presentation experience.

Lazy-load grouping workflow

1. Initially, only top-level group caption rows are rendered in a collapsed state.

2. Child rows are loaded and displayed dynamically when a group is expanded.

3. Virtual scrolling loads a buffered subset of records as needed, optimizing data rendering and memory usage.

To enable this feature, set both groupSettings.enableLazyLoading and enableVirtualization properties to true.

The following example demonstrates configuring lazy load grouping with virtual scrolling using these properties.

CSHTML

<ejs-grid id="grid" dataSource="@ViewBag.dataSource" enableVirtualization="true" height="350px" allowGrouping="true">
    <e-grid-groupSettings enableLazyLoading="true" columns="@(new string[] {"ProductName", "CustomerName"})"></e-grid-groupSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="160"></e-grid-column>
        <e-grid-column field="ProductID" headerText="Product ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerName" headerText="Customer Name" width="160"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

virtual-scroll.cs

public IActionResult Index()
{
    ViewBag.dataSource =OrderDetails.GetAllRecords();;
    return View();
}

When using the enableVirtualization feature, it is necessary to define the height property.

Lazy load grouping constraints

Lazy load grouping supports both UrlAdaptor and JsonAdaptor data sources, making it suitable for local and remote data scenarios. Selection and clipboard operations work with expanded groups.