Edit this page

Merged Cells

As of Q3 2014 we have introduced support for merged cells in RadGridView control. As a result the serial cells with equal values can be merged vertically or horizontally.

Merging the cells is only available with GridViewDataColumn.

To get started, you can find some code snippets below.

For the purpose of this example, the data in RadGridView is populated similarly to as explained in Getting Started with RadGridView article.

Then, you can configure RadGridView to display the merged cells by specifying a proper value for the MergedCellsDirection property.

The three possible options are:

  • None

  • Vertical

  • Horizontal

Merged Cells are only supported with GroupRenderMode=”Flat”. You can check the Rendering Modes article for further details on it.

Currently, frozen columns are not supported while having merged cells enabled. An exception will be thrown: "Cell merging is not supported when frozen columns are enabled.”.

Example 1: Configure RadGridView to merge cells vertically

<telerik:RadGridView ColumnWidth="*"
                    MergedCellsDirection="Vertical"
                    CanUserFreezeColumns="False"
                    GroupRenderMode="Flat"/>

Figure 1: RadGridView with vertically merged cells

gridview merged cells 1

Similarly, you can set the cells to be merged horizontally configuring RadGridView with MergedCellsDirection.Horizontal.

Example 2: Configure RadGridView to merge cells horizontally

<telerik:RadGridView ColumnWidth="*"
                    MergedCellsDirection="Horizontal"
                    CanUserFreezeColumns="False"
                    GroupRenderMode="Flat"/>

Figure 2: RadGridView with horizontally merged cells

gridview merged cells 2

You can also configure merging for GridViewDataColumn through setting its IsCellMergingEnabled property. For example:

Example 3: Configure cell merging per column

<telerik:RadGridView ColumnWidth="*"
                      MergedCellsDirection="Vertical"
                      CanUserFreezeColumns="False"
                      GroupRenderMode="Flat">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn IsCellMergingEnabled="False"/>
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Please note RadGridView's definition in Example 3 is specific to illustrate it

Figure 3: RadGridView with configured cell merging per column

gridview merged cells 3

Merged cells are also supported when there is RowDetails/Hierarchy defined for RadGridView.

Example 4: Define RowDetailsTemplate

<DataTemplate x:Key="RowDetailsTemplate">
  <StackPanel>
    <TextBlock Text="First Name: " FontWeight="Bold"/>
    <TextBlock Text="{Binding FirstName}" />
    <TextBlock Text="Last Name: " FontWeight="Bold"/>
    <TextBlock Text="{Binding LastName}" />
  </StackPanel>
</DataTemplate>

Example 5: Specify RowDetailsTemplate for RadGridView

<telerik:RadGridView
  Name="radGridView"
  ColumnWidth="100"
  MergedCellsDirection="Vertical"
  GroupRenderMode="Flat"
  CanUserFreezeColumns="False"
  RowDetailsTemplate="{StaticResource RowDetailsTemplate}">
  <telerik:RadGridView.Columns>
    <telerik:GridViewToggleRowDetailsColumn/>
  </telerik:RadGridView.Columns>
</telerik:RadGridView>

Figure 4: RadGridView with merged cells and RowDetails defined

gridview merged cells 4

Figure 5: RadGridView with merged cells and RowDetails expanded

gridview merged cells 5

Once the row details are expanded, the merged cell will be separated into two different subsets. The particular cell that is part of the expanded row will be considered as a single one instead.

Known limitations:

  • Validation is currently not fully supported. Some scenarios are covered when RadGridView is configured with ValidatesOnDataErrors="InEditMode".

  • Selection is currently not supported for the merged cells. When selecting a row, all the cells except for the merged one will show as selected.

  • Frozen columns are not supported while having merged cells enabled. "Cell merging is not supported when frozen columns are enabled.” is to be thrown.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy