Blazor DataGrid Example - Row 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.
Order ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Customer ID Sorted in ascending order. Press Ctrl space to group. Press Alt Down to open filter Menu | Freight Press Enter to sort. Press Alt Down to open filter Menu | Order Date Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Order Time Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu |
|---|
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.