Group Row

• Apr 06, 2022
• 3 minutes to read

Group rows organize data rows into a tree when GridControl data is grouped. Group rows display the following elements:

• Expand Button
• Group Value
• Group Summary

The table below lists properties that affect element behavior and appearance:

Characteristics	Members
Appearance	GridControl.GroupRowStyleSettings
Minimum Height	GridControl.GroupRowMinHeight
Group Level Indent	GridControl.GroupLevelIndent
Expand Button’s Visibility	GridControl.ShowGroupRowExpandButton
Expand Button’s Template	GridControl.GroupRowExpandButtonTemplate
Expand Button’s Appearance	GridControl.GroupRowExpandButtonStyleSettings
Group Value Template	GridControl.GroupValueTemplate
Group Summary Alignment	GridControl.GroupSummaryDisplayMode
Group Summary Template	GridControl.GroupSummaryItemTemplate
Column Group Summary Template	ColumnBase.GroupColumnSummaryItemTemplate

Show Expand/Collapse API

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:

XAML

<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:

XAML

<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.

GroupSummaryDisplayMode = Default

GroupSummaryDisplayMode = AlignByColumns

The GridControl.GroupSummaryItemTemplate and ColumnBase.GroupColumnSummaryItemTemplate properties allow you to define the appearance of summaries in Default and AlignByColumns display modes.

XAML

<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>