New to Telerik UI for WPF? Download free 30-day trial

Column Groups

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

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:GridViewColumnGroup Name="VehicleInfo" Header="Vehicle info" /> 
        <telerik:GridViewColumnGroup Name="Dimensions" Header="Dimensions" /> 
        <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" /> 

Figure 1: RadGridView with Column Groups

Telerik WPF DataGrid Column Headers 7

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:GridViewColumnGroup Name="Data" Header="Data"> 
        <telerik:GridViewColumnGroup Name="VehicleInfo" Header="Vehicle info" /> 
        <telerik:GridViewColumnGroup Name="Dimensions" Header="Dimensions" /> 

Figure 2: Nested column groups

Telerik WPF DataGrid Column Headers 8

Define Custom Header

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

Example 3: Define GridViewColumnGroup.HeaderTemplate

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

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.

Add or Remove Multiple Column Groups at Once

As of R3 2020 SP the ColumnGroups property is of type RadObservableCollection which exposes the AddRange and RemoveRange methods that can be used when adding or removing multiple groups at once in order to improve performance.

Example 4: Add or remove multiple column groups at once


An alternative is to use the SuspendNotifications and ResumeNotifications methods prior and after adding or removing the groups.

Example 5: Suspend and resume notifications

foreach (var group in groupsToAdd) 
foreach (var group in groupsToRemove) 
For Each group In groupsToAdd 
Next group 
For Each group In groupsToRemove 
Next group 

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 6: Sample column groups setup

    <telerik:GridViewColumnGroup Name="Level2group1"> 
        <telerik:GridViewColumnGroup Name="Level1group11"/> 
        <telerik:GridViewColumnGroup Name="Level1group12"/> 
    <telerik:GridViewColumnGroup Name="Level2group2"> 
        <telerik:GridViewColumnGroup Name="Level1group21"/> 
        <telerik:GridViewColumnGroup Name="Level1group22"/> 

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

Telerik WPF DataGrid column groups frozen column 1

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

Telerik WPF DataGrid column groups frozen column 2

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

Telerik WPF DataGrid column groups frozen column 3

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

Telerik WPF DataGrid column groups default groups 1

Telerik WPF DataGrid column groups default groups 2

Telerik WPF DataGrid column groups default groups 3

See Also

In this article