Edit this page

Column Groups/Merged column headers

Columns in RadGridView may be grouped in column groups visually presented by common column headers (GridViewColumnGroups). As of version Q2 2015 we also introduced column group virtualization.

Define Column Groups

Columns in RadGridView may be grouped in column groups(added with Q3 2011). Column groups are visually presented by common column headers.

To enable column grouping you need to define RadGridView.ColumnGroups as illustrated below.

[XAML]Example 1: Definining ColumnGroups and specifying them for columns

<telerik:RadGridView x:Name="RadGridView1" GridLinesVisibility="Vertical" Width="450" CanUserFreezeColumns="False" AutoGenerateColumns="False" IsFilteringAllowed="False"  ShowGroupPanel="False" RowIndicatorVisibility="Collapsed">
    <telerik:RadGridView.ColumnGroups>
        <telerik:GridViewColumnGroup  Name="VehicleInfo" Header="Vehicle info" />
        <telerik:GridViewColumnGroup  Name="Dimensions" Header="Dimensions" />
    </telerik:RadGridView.ColumnGroups>
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Make}" ColumnGroupName="VehicleInfo" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Model}" ColumnGroupName="VehicleInfo" />
        <telerik:GridViewDataColumn  DataMemberBinding="{Binding Length}" ColumnGroupName="Dimensions" />
        <telerik:GridViewDataColumn  DataMemberBinding="{Binding Width}"  ColumnGroupName="Dimensions" />
        <telerik:GridViewDataColumn  DataMemberBinding="{Binding Heigth}" ColumnGroupName="Dimensions" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Figure 1: Column Groups.
Rad Grid View Column Headers 7

GridViewColumnGroup has a Header property which defines the content to be shown inside the common header. It may be a simple string or a visual element.

In case no Header is specified, its default value is the Name of GridViewColumnGroup.

To tell that a specific column belongs to a specific group, you need to set the ColumnGroupName property of the column to match the value of the Name property of the relevant GridViewColumnGroup.

For example:

[XAML]Example 2: Specify ColumnGroupName for a column

<telerik:RadGridView.ColumnGroups>
    <telerik:GridViewColumnGroup  Name="VehicleInfo" Header="Vehicle info" />
</telerik:RadGridView.ColumnGroups>
<telerik:RadGridView.Columns>
    <telerik:GridViewDataColumn DataMemberBinding="{Binding Make}" ColumnGroupName="VehicleInfo" />
</telerik:RadGridView.Columns>

Column groups can be nested. They can be defined like so:

[XAML]Example 3: Nested ColumnGroups

<telerik:RadGridView.ColumnGroups>
    <telerik:GridViewColumnGroup  Name="Data" Header="Data">
        <telerik:GridViewColumnGroup  Name="VehicleInfo" Header="Vehicle info" />
        <telerik:GridViewColumnGroup  Name="Dimensions" Header="Dimensions" />
    </telerik:GridViewColumnGroup>
</telerik:RadGridView.ColumnGroups>

Figure 2: Nested ColumnGroups.
Rad Grid View Column Headers 8

Define Custom Header

You can define a custom header for the GridViewColumnGroup through its HeaderTemplate:

[XAML]Example 4: Define GridViewColumnGroup.HeaderTemplate

<telerik:GridViewColumnGroup Name="Data">
    <telerik:GridViewColumnGroup.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="Data"/>
        </DataTemplate>
    </telerik:GridViewColumnGroup.HeaderTemplate>
</telerik:GridViewColumnGroup>

Virtualization Modes

Based on client feedback, as of version Q2 2015 we introduced column group improvements. They include column groups virtualization. The default mode enables container recycling for a better performance results.

It can be configured through setting RadGridView.EnableColumnGroupsVirtualization property:

  • True (default) – enables horizontal container recycling
  • False – there is no virtualization logic

This mode is especially useful when there is some more complicated usage of column groups including additional features as Frozen Column, reordering of columns, etc.

When the column group virtualization is enabled, the Name should be unique.

With the new virtualization mode, we can also offer a better visual representation.

For the purpose of demonstration, let's define more illustrative Names:

[XAML]Example 5: Sample ColumnGroups setup

<telerik:RadGridView.ColumnGroups>          
    <telerik:GridViewColumnGroup Name="Level2group1">
        <telerik:GridViewColumnGroup Name="Level1group11"/>
        <telerik:GridViewColumnGroup Name="Level1group12"/>
    </telerik:GridViewColumnGroup>
    <telerik:GridViewColumnGroup Name="Level2group2">
        <telerik:GridViewColumnGroup Name="Level1group21"/>
        <telerik:GridViewColumnGroup Name="Level1group22"/>
    </telerik:GridViewColumnGroup>
</telerik:RadGridView.ColumnGroups>
  • In case the user moves the frozen column splitter in a middle of an existing ColumnGroup, then it will be divided into two separate ColumnGroups. That way the user can still have visual representation on the second part when scrolling horizontally.

Figure 3: Initial setup with FrozenColumnSplitter at default position.
Initial setup with FrozenColumnSplitter

Figure 4: FrozenColumnSplitter moved after first column and a duplicate ColumnGroup is created.
FrozenColumnSplitter moved after first column

Figure 5: ColumnGroup's Header is still visible after scrolling to the right.
FrozenColumnSplitter moved after first column

  • On scrolling horizontally, the ColumnGroup header remains visible until there are still visible sub-columns under the specific group. You can refer to Figure 3 above.

  • Defined ColumnGroups are now drawn only if they are specified for at least one column.

  • When not all GridViewColumns are configured with ColumnGroupName, then the independent ones are placed under one common empty ColumnGroup.

Figure 6: Various setups illustrating the default space fill.

Nested groups and Default space fill

Nested groups and Default space fill

Nested groups and Default space fill