Edit this page

Column Groups

Columns in RadGridView may be grouped in column groups visually represented by common column headers.

This article covers the following topics:

Define Column Groups

To enable column grouping you need to add GridViewColumnGroup instances to RadGridView's ColumnGroups collection as illustrated in Example 1.

Example 1: Define column groups

<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 Height}" ColumnGroupName="Dimensions" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Figure 1: RadGridView with Column Groups

RadGridView with Column Groups

Please observe that to add a specific column to a certain column group, you need to set the ColumnGroupName property of the column to match the value of the Name property of the relevant GridViewColumnGroup.

Note also that the GridViewColumnGroup class 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 that no header is specified the Name of the GridViewColumnGroup will be displayed.

Nested Column Groups

Column groups can also be nested. Example 2 shows how this is achieved.

Example 2: Nested column groups

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

Nested column groups

Define Custom Header

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

Example 3: Define GridViewColumnGroup.HeaderTemplate

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

In addition, you can style the headers by defining a style targeting the CommonColumnHeader element and setting it as the HeaderStyle for the GridViewColumnGroup. For information on how to apply an implicit style, have a look at the Styling Column Groups article.

Virtualization Modes

Column groups also support UI virtualization meaning that only the visual elements that are loaded in the viewable area are processed. This way, the performance of the control can be significantly enhanced.

This functionality can be configured through the EnableColumnGroupsVirtualization boolean property. Its default value is True in which case UI virtualization is enabled.

This mode is especially useful in more complicated scenarios where additional features such as frozen columns, reordering of columns, etc. are used.

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

Specific Scenarios

This section will cover some specific scenarios when using column groups.

For the purpose of this demonstration we will define the following groups.

Example 4: Sample column groups 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 the middle of an existing column group, then it will be divided into two separate groups. Figures 3 to 5 demonstrate this scenario.

Figure 3: Initial setup with FrozenColumnSplitter at default position

Initial setup with FrozenColumnSplitter

Figure 4: A duplicate column group is created when FrozenColumnSplitter moved after the first column

A duplicate column group is created when FrozenColumnSplitter moved after the first column

Figure 5: ColumnGroup's Header is still visible after scrolling to the right

ColumnGroup's Header is still visible after scrolling to the right

When scrolling horizontally, the column group header remains visible until there are still visible sub-columns under the specific group.

Defined column groups are now drawn only if they are specified for at least one visible column.

When some GridViewColumns do not have a ColumnGroupName specified, they are placed under an empty ColumnGroup. This is illustrated in Figure 6.

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

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy