Group Data
- 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.
<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 |
---|---|---|
Grid |
Property | Gets or sets whether all group rows are automatically expanded after each grouping operation. This is a dependency property. |
Grid |
Method | Expands all group rows. |
Grid |
Method | Collapses all group rows. |
Grid |
Method | Expands the specified group row. |
Grid |
Method | Collapses the specified group row. |
Grid |
Method | Indicates whether the specified group row is expanded. |
Grid |
Command | Expands all group rows. |
Grid |
Command | Collapses all group rows. |
Grid |
Command | Toggles the specified group row’s expanded state. |
Grid |
Event | Occurs before a group row is expanded. |
Grid |
Event | Occurs after a group row is expanded. |
Grid |
Event | Occurs before a group row is collapsed. |
Grid |
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 |
---|---|
Column |
Gets or sets the column’s position among grouping columns. |
Grid |
Groups data by the values of the specified column. |
Grid |
Ungroups data by the values of the specified column. |
Grid |
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.
<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>
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;
}