Group Row
- 3 minutes to read
Group rows organize data rows into a tree when GridControl data is grouped. Group rows display the following elements:
The table below lists properties that affect element behavior and appearance:
Characteristics | Members |
---|---|
Appearance | Grid |
Minimum Height | Grid |
Group Level Indent | Grid |
Expand Button’s Visibility | Grid |
Expand Button’s Template | Grid |
Expand Button’s Appearance | Grid |
Group Value Template | Grid |
Group Summary Alignment | Grid |
Group Summary Template | Grid |
Column Group Summary Template | Column |
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. |
#Expand Button
A group row contains an expand button that shows or hides the group row’s child rows. To hide this button, set the GridControl.ShowGroupRowExpandButton property to false.
The following code sample uses the GridControl.GroupRowExpandButtonTemplate property to display the group level next to the expand button:
<dxg:GridControl ...>
<dxg:GridControl.GroupRowExpandButtonTemplate>
<DataTemplate x:DataType="dxg:GroupRowData">
<StackPanel Orientation="Horizontal">
<dxg:GroupRowExpandButton/>
<TextBlock Text="{x:Bind Level, Mode=OneWay}"
VerticalAlignment="Bottom"
Opacity="0.5"
Margin="-10,0,10,0"/>
</StackPanel>
</DataTemplate>
</dxg:GridControl.GroupRowExpandButtonTemplate>
</dxg:GridControl>
You can use the GridControl.GroupRowExpandButtonStyleSettings property to change the expand button’s icon and its expand/collapse animation effect.
#Group Value
The GridControl displays group information in the following format: Group Column: Value
. Use the GridControl.GroupValueTemplate property to define the appearance of group values. For example, you can display only column values:
<dxg:GridControl ...>
<dxg:GridControl.GroupValueTemplate>
<DataTemplate x:DataType="dxg:GroupValueData">
<TextBlock Text="{x:Bind Value.ToString()}" VerticalAlignment="Center"/>
</DataTemplate>
</dxg:GridControl.GroupValueTemplate>
</dxg:GridControl>
#Group Summary
The group summary‘s default position is next to group values. You can change this behavior and display group summaries under corresponding columns. To do this, set the GridControl.GroupSummaryDisplayMode property to AlignByColumns.
The GridControl.GroupSummaryItemTemplate and ColumnBase.GroupColumnSummaryItemTemplate properties allow you to define the appearance of summaries in Default and AlignByColumns display modes.
<dxg:GridControl ...>
<dxg:GridControl.GroupSummary>
<dxg:GridGroupSummaryItem FieldName="UnitPrice" SummaryType="Sum"/>
</dxg:GridControl.GroupSummary>
<dxg:GridControl.GroupSummaryItemTemplate>
<DataTemplate x:DataType="dxg:GroupSummaryData">
<StackPanel Orientation="Horizontal" Background="Bisque" Margin="10,0,0,0">
<TextBlock Text="Total Price: "/>
<TextBlock Text="{x:Bind Value.ToString()}" Foreground="Red"/>
</StackPanel>
</DataTemplate>
</dxg:GridControl.GroupSummaryItemTemplate>
</dxg:GridControl>