Group Data

• Feb 15, 2023
• 4 minutes to read

Enable the ColumnBase.AllowGrouping property to allow users to group data and change the group options in a grid column.

Enable the GridControl’s ShowGroupPanel property to display the Group Panel. Users can drag a column header onto the Group Panel to group data by this column. They can also drag headers within this panel to change the group order. To ungroup data by a column, users should drag the column header from the Group Panel back to the Column Header Panel.

Set a column’s ColumnBase.GroupIndex property to a zero-based integer value to group grid data in code. If you group data by multiple columns, this property specifies the group level. The lower the value, the higher a column’s group level. To ungroup grid data, set the ColumnBase.GroupIndex property to -1.

The GridControl displays group columns in the Group Panel. Use the GridControl.ShowGroupedColumns property to specify whether to display grouped columns with other columns in the Column Header Panel.

When you group data against a column, the GridControl sorts data in this column in ascending order.

Group Data by Intervals

You can change how the GridControl groups its data. Use the column’s ColumnBase.GroupInterval property to specify the required group mode.

The image below shows group modes that allow you to group data rows by the first character or arrange them by the date ranges.

XAML

<dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}" AutoGenerateColumns="False">
    <dxg:GridControl.Columns>
        <dxg:GridTextColumn FieldName="Country" GroupInterval="Alphabetical"/>
        <dxg:GridDateColumn FieldName="OrderDate" GroupInterval="DateRange"/>
        <!-- ... -->
    </dxg:GridControl.Columns>
</dxg:GridControl>

Expand and Collapse Group Rows

API	Type	Description
GridControl.AutoExpandAllGroups	Property	Gets or sets whether all group rows are automatically expanded after each grouping operation. This is a dependency property.
GridControl.ExpandAllGroups	Method	Expands all group rows.
GridControl.CollapseAllGroups	Method	Collapses all group rows.
GridControl.ExpandGroupRow	Method	Expands the specified group row.
GridControl.CollapseGroupRow	Method	Collapses the specified group row.
GridControl.IsGroupRowExpanded	Method	Indicates whether the specified group row is expanded.
GridControlCommands.ExpandAllGroups	Command	Expands all group rows.
GridControlCommands.CollapseAllGroups	Command	Collapses all group rows.
GridControlCommands.ChangeGroupExpanded	Command	Toggles the specified group row’s expanded state.
GridControl.GroupRowExpanding	Event	Occurs before a group row is expanded.
GridControl.GroupRowExpanded	Event	Occurs after a group row is expanded.
GridControl.GroupRowCollapsing	Event	Occurs before a group row is collapsed.
GridControl.GroupRowCollapsed	Event	Occurs after a group row is collapsed.

Group Data in Code

Use the following methods and properties to group/ungroup GridControl data at runtime.

API	Description
ColumnBase.GroupIndex	Gets or sets the column’s position among grouping columns.
GridControl.GroupBy	Groups data by the values of the specified column.
GridControl.UngroupBy	Ungroups data by the values of the specified column.
GridControl.ClearGrouping	Ungroups the grid.

How to Implement Custom Grouping

The following code sample shows how to apply custom rules to group rows. When you group data by the Unit Price column, rows in this column that have values between 0 and 10 are combined into a single group. Rows whose values fall between 10 and 20 are combined into another group, and so forth.

XAML

<Window ...
    xmlns:dxg="using:DevExpress.WinUI.Grid">
    <dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}" 
                     AutoGenerateColumns="False" 
                     CustomColumnGroup="GridControl_CustomColumnGroup" 
                     CustomGroupDisplayText="GridControl_CustomGroupDisplayText" 
                     ShowGroupedColumns="True">
        <dxg:GridControl.Columns>
            <dxg:GridTextColumn FieldName="ProductName"/>
            <dxg:GridTextColumn FieldName="Country"/>
            <dxg:GridTextColumn FieldName="City"/>
            <dxg:GridSpinEditColumn FieldName="UnitPrice" SortMode="Custom" GroupIndex="0"/>
            <dxg:GridTextColumn FieldName="Quantity"/>
        </dxg:GridControl.Columns>
    </dxg:GridControl>
</Window>

C#

void GridControl_CustomColumnGroup(object sender, DevExpress.WinUI.Grid.CustomColumnSortEventArgs e) {
    if(e.Column.FieldName != "UnitPrice")
        return;
    double x = Math.Floor(Convert.ToDouble(e.Value1) / 10);
    double y = Math.Floor(Convert.ToDouble(e.Value2) / 10);
    e.Result = x > 9 && y > 9 ? 0 : x.CompareTo(y);
    e.Handled = true;
}

void GridControl_CustomGroupDisplayText(object sender, DevExpress.WinUI.Grid.CustomGroupDisplayTextEventArgs e) {
    if(e.Column.FieldName != "UnitPrice")
        return;
    string interval = IntervalByValue(e.Value);
    e.DisplayText = interval;
}
// Gets the interval which contains the specified value.
string IntervalByValue(object val) {
    double d = Math.Floor(Convert.ToDouble(val) / 10);
    string ret = string.Format("{0:c} - {1:c} ", d * 10, (d + 1) * 10);
    if(d > 9)
        ret = string.Format(">= {0:c} ", 100);
    return ret;
}