How to Efficiently Group a Large Volume of Data in Blazor DataGrid
Tags: blazor, csharp, dotnet, webdev
Published: 2021-08-25 12:50:47

---
title: How to Efficiently Group a Large Volume of Data in Blazor DataGrid
published: true
date: 2021-08-25 10:00:04 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/how-to-efficiently-group-a-large-volume-of-data-in-blazor-datagrid.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmqsuoi2q164s9nzqoqi.png
---

Handling a large volume of data in an application usually consumes a lot of memory, slowing down the application. It is challenging to efficiently handle a large amount of data and maintain good performance. In a scenario of grouping large data, grouping itself would consume considerable memory, and performing the grouping over the data would be very complicated. To effectively handle this scenario, our Blazor DataGrid is designed to support lazy load grouping.

Our Syncfusion [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to the Blazor DataGrid") is a control for displaying data in tabular format. Its rich feature set includes data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, freezing rows, and more. It can also export data to Excel, CSV, and PDF formats.

In this blog, we will see how to enable the lazy load grouping feature in the Syncfusion Blazor DataGrid to effectively group and load your large volume of data on demand.

## What is lazy loading?

Normally, when a user groups data based on a column, all the grouped records are downloaded from the server and rendered in a single request.

But there’s no guarantee that the user will actually view all of the downloaded data. For example, when a user opens an image gallery website and leaves the site after viewing just the first image. Then, the rest of the downloaded images are a waste of memory and bandwidth.

Instead of loading all the data and rendering it in a single request, the concept of lazy loading loads only the required section. It will delay loading the remaining data until the user needs it.

The advantages of lazy loading are:

- Reduced initial loading time.
- Bandwidth conservation.
- System resource conservation.

## Normal grouping vs. lazy load grouping

In  **normal grouping mode** , when a user groups a column, the caption rows, and data rows will be rendered in the **expanded state**. But the data row rendering is limited by the page size. If the data rows exceed the page size, then the grid will render the remaining data rows on the next page.

In **lazy load grouping mode** , the Blazor DataGrid renders the caption rows in the **collapsed state** while performing the group action. When expanding a caption row, the DataGrid will fetch the child rows of each caption row from the server and render them in the viewport.

The first level of group caption rows is considered as a page-size count. For example, if the page size value is 7, then only seven group caption rows will be rendered on each page. There is no limit on the data row count inside of these caption rows.

Thus, each group caption row can contain any number of data rows or nested caption rows.

**Note:** The caption row expand/collapse state persists on each page and the grid page count is based on the caption and child rows.

## How to enable lazy load grouping in Syncfusion Blazor DataGrid

Follow these steps to enable the lazy load grouping in the Blazor DataGrid to effectively group a large volume of data:

### Step 1: Set up Blazor DataGrid

Refer to the [Getting Started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started "Link to Getting Started with Blazor DataGrid Component") documentation to create a Blazor project and add the DataGrid component to your application.

### Step 2: Enable lazy load group in the Blazor DataGrid

Then, enable the lazy load grouping feature by setting the **EnableLazyLoading** property to **true** in the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html?&_ga=2.58108202.1020415808.1629782178-1629838656.1583207915#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings "Link to the GridGroupSettings property") component. Lazy load grouping depends on the grouping feature, so we should set the **AllowGrouping** property to **true**.

Refer to the following code example.

```html
<SfGrid TValue="Order" DataSource="Products" AllowGrouping="true" AllowPaging="true" AllowSorting="true" Height="450">
	<GridGroupSettings EnableLazyLoading="true" ShowGroupedColumn="true" Columns="@GroupedColumns">
		<CaptionTemplate>
			@{
				var order = (context as CaptionTemplateContext);
   				<div>@order.HeaderText: @order.Key</div>
			}
		</CaptionTemplate>
	</GridGroupSettings>
	<GridPageSettings PageSize="80"></GridPageSettings>
	<GridAggregates>
		<GridAggregate>
			<GridAggregateColumns>
				<GridAggregateColumn Field=@nameof(Order.UnitsInStock) Type="AggregateType.Sum">
					<GroupFooterTemplate>
						@{
							var Unit = (context as AggregateTemplateContext);
	  						<div>
	   						Total units: @Unit.Sum
	  						</div>
						}
					</GroupFooterTemplate>
				</GridAggregateColumn>
			</GridAggregateColumns>
		</GridAggregate>
	</GridAggregates>
	<GridColumns>
		<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" AllowGrouping="false" TextAlign="@TextAlign.Center" Width="180"></GridColumn>
		<GridColumn Field=@nameof(Order.ProductName) HeaderText="Product" Width="200"></GridColumn>
		<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="170"></GridColumn>
		<GridColumn Field=@nameof(Order.UnitsInStock) HeaderText="Units In Stock" TextAlign="TextAlign.Right" Width="120"></GridColumn>
	</GridColumns>
</SfGrid>

@code {
	public string[] GroupedColumns = new string[] { "ProductName", "CustomerID" };

	public List<Order> Products { get; set; }

	protected override void OnInitialized()
	{
		Products = Order.GetAllRecords();
	}
       
       public class Order
	{
		public int OrderID { get; set; }
		public string CustomerID { get; set; }
		public string CustomerName { get; set; }
		public string CustomerAddress { get; set; }
		public string ProductName { get; set; }
		public int ProductID { get; set; }
		public string Quantity { get; set; }
		public int UnitsInStock { get; set; }
              public static List<Order> GetAllRecords()
		{
			List<Order> customers = new List<Order>();
			. . . . .
                      // code excluded for brevity
			return customers;
		}
	}
}
```

After executing this code, we will get the output like the following .gif image.

![Lazy Load Grouping in Blazor DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Lazy-Load-Grouping-in-Blazor-DataGrid.gif)<figcaption>Lazy Load Grouping in Blazor DataGrid</figcaption>

## GitHub reference

For more details, refer to the demo to [Group Large Data in Blazor DataGrid](https://github.com/SyncfusionExamples/blazor-grid-lazyload-group "Link to Lazy Load Grouping in Blazor DataGrid demo on GitHub").

## Conclusion

Thanks for reading! In this blog post, we have seen how to effectively group a large amount of data using the lazy load grouping feature in the Syncfusion Blazor [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to Blazor DataGrid"). You can use this feature to load a huge amount of grouped data in the Grid without any performance degradation. This feature will reduce the initial loading time and enhance the bandwidth and system resource conservation.  We encourage you to go through our [Blazor DataGrid demos](https://blazor.syncfusion.com/demos/datagrid/lazyloadgroup?theme=bootstrap4 "Link to Example of Lazy Load Grouping in Blazor DataGrid Component") and [documentation](https://blazor.syncfusion.com/documentation/datagrid/grouping#lazy-load-grouping "Link to Lazy Load Grouping in Blazor DataGrid documentation") for more details. So, try out this feature and leave your feedback in the comments section of this blog post!

The Syncfusion DataGrid component is also available for the ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid "Link to the ASP.NET Core DataGrid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid "Link to the ASP.NET MVC DataGrid"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/datagrid "Link to the ASP.NET Web Forms DataGrid")), [Angular](https://www.syncfusion.com/angular-ui-components/angular-grid "Link to the Angular DataGrid"), [Blazor](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to the Blazor DataGrid"), [React](https://www.syncfusion.com/react-ui-components/react-data-grid "Link to the React DataGrid"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-grid "Link to the Vue DataGrid"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "Link to the Xamarin DataGrid"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Link to the Flutter DataGrid"), [UWP](https://www.syncfusion.com/uwp-ui-controls/datagrid "Link to the UWP DataGrid"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/datagrid "Link to the WinForms DataGrid"), [WPF](https://www.syncfusion.com/wpf-ui-controls/datagrid "Link to the WPF DataGrid"), and [WinUI](https://www.syncfusion.com/winui-controls/datagrid "Link to the WinUI DataGrid") platforms.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out the DataGrid and hundreds of other components.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easy Steps to Synchronize JIRA Calendar Tasks With the Blazor Scheduler](https://dev.to/karthickramasamy08/easy-steps-to-synchronize-jira-calendar-tasks-with-the-blazor-scheduler-59ff-temp-slug-1504815 "Link to Easy Steps to Synchronize JIRA Calendar Tasks with the Blazor Scheduler blog")
- [Exploring Blazor Hybrid App using Mobile Blazor Bindings](https://dev.to/syncfusion/exploring-blazor-hybrid-app-using-mobile-blazor-bindings-1o49 "Link to Exploring Blazor Hybrid Apps Using Mobile Blazor Bindings blog")
- [Get Real-Time Updates in Blazor WebAssembly Apps with SignalR Communication](https://dev.to/syncfusion/get-real-time-updates-in-blazor-wasm-apps-with-signalr-communication-eon "Link to Get Real-Time Updates in Blazor WebAssembly Apps with SignalR Communication blog")
- [Creating a Master-Detail View Is Easier with Blazor DataGrid](https://dev.to/syncfusion/creating-a-master-detail-view-is-easier-with-blazor-datagrid-ff0 "Link to Creating a Master-Detail View Is Easier with Blazor DataGrid blog")