Edit this page

Modify GroupRow

This article explains how you can modify the default GroupRow's header and footer templates per RadGridView's level or per GridViewColumn's level.

Basically you can change the GroupRow Headers by predefining the GroupHeaderTemplate and you can change the Group Footers by predefining the GroupFooterTemplate. That way you can set a DataTemplate as per your preferences or reqirements.

For visual modifications of the group row, you can refer to the documentation on Styling GroupRow.

For a reference on the visual structure of the GridView you can follow this article..

Please note that the DataContext of the group row is GroupViewModel. As you can check in the API reference, this class contains properties like Group, Column, AggregateResults, etc. Having this in mind you can bind the TextBlock-s in the GroupHeaderTemplate to the values of the properties in the GroupViewModel.

Overriding GroupHeaderTemplate

Below you can find a sample code showing how to set a new GroupHeaderTemplate for the GridViewDataColumn:

<telerik:GridViewDataColumn.GroupHeaderTemplate>
    <DataTemplate>
        <StackPanel>
            <TextBlock Foreground="#FFED7971"
Text="Test Key" />
            <TextBlock Foreground="#FFED7971"
Text="{Binding Group.Key}" />
        </StackPanel>
    </DataTemplate>
</telerik:GridViewDataColumn.GroupHeaderTemplate>

You could do the same for all the columns by defining a GroupHeaderTemplate for the RadGridView:

<telerik:RadGridView.GroupHeaderTemplate>
    <DataTemplate>
        <StackPanel>
            <TextBlock Foreground="#FFED7971"
     Text="Test Key" />
            <TextBlock Foreground="#FFED7971"
     Text="{Binding Group.Key}" />
        </StackPanel>
    </DataTemplate>
</telerik:RadGridView.GroupHeaderTemplate>

Note that if you have any AggregateFunctions defined, and you do not want the default aggregate reasults to show after predefining the GroupHeaderTemplate, you will have to hide them. You can achieve this, like so:

<Style TargetType="telerik:GridViewGroupRow">
    <Setter Property="ShowHeaderAggregates" Value="False"/>
</Style>

As of Q3 2012 we have introduced a new rendering mode of RadGridView - Flat. When you set the Flat mode, the GridView will render rows one below the other. You can also refer to the Grouping Modes article.

Overriding GroupFooterTemplate

A similar logic applies for the group footers and GroupFooterTemplate. For example, you can define such per column with the following sample DataTemplate:

<telerik:GridViewDataColumn.GroupFooterTemplate>
   <DataTemplate>
      <telerik:AggregateResultsList ItemsSource="{Binding}">
          <ItemsControl.ItemTemplate>
              <DataTemplate>
                  <StackPanel Orientation="Horizontal"
          VerticalAlignment="Center" >
                      <TextBlock VerticalAlignment="Center" Text="{Binding Caption}" />
                      <TextBlock VerticalAlignment="Center" Text="{Binding FormattedValue, StringFormat=' {0:hh\:mm}'}" />
                  </StackPanel>
              </DataTemplate>
          </ItemsControl.ItemTemplate>
      </telerik:AggregateResultsList>
  </DataTemplate>
</telerik:GridViewDataColumn.GroupFooterTemplate>

You can also check the implementation of Totals WPF Demos.

For styling the appearance of the GroupRow via editing the template of the GridViewGroupRow, please follow this this article.