Blazor DataGrid Example - Row Grouping

DataGrid / Grouping / Grouping

This sample demonstrates grouping feature of the DataGrid component. In this sample, the data is grouped by the Customer ID column. To group by a different column, simply drag and drop the desired column header into the group drop area above the grid.

Loading Syncfusion Blazor Server Demos…

Customer ID
1 of 6 pages (70 items)

The Blazor DataGrid control provides the ability to group records based on the required column. When grouping is used, grouped records are organized into a hierarchical structure to allow for easier record expansion and collapsing. Set the AllowGrouping property to true to enable grouping.

In this sample, the DataGrid is rendered with grouping enabled and is initially grouped by the Customer ID column. Columns can be grouped by dragging and dropping the column header onto the group drop area.

To maintain the expand or collapse state of grouped rows in a DataGrid, the PersistGroupState option can be activated dynamically using a checkbox. This functionality ensures that the grouping state(Expand or Collapse) remains consistent even after performing actions such as paging, sorting, or filtering are performed. To enable group state persistence, set the PersistGroupState property to true. By default, this property is set to false.

More information about the Grouping feature can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE