Telerik blogs

PART III [example: Column Groups  A.K.A. Merged Column Headers]

 

Recently we have had a lots of requests for a feature referred as column groups / merged column headers / common headers for two or more columns - something like :

 common_header

Here we have three ordinary columns ( L, W, H)  with regular column headers . There is also an additional common header – ‘Dimensions’ which spans over the three regular headers.

Unfortunately RadGridView for Silverlight and WPF does not support this internally (yet).

 

The good news is that RadGridView is a flexible and easily extendable control so we can easily attach a new column grouping behavior. You can see it in action here:

(live & clickable  example

We set up the common headers codeless  with a few lines of XAML:

   1: <telerik:RadGridView x:Name="RadGridView1" >
   2: <i:Interaction.Behaviors>
   3: <local:ColumnGroupsBehavior>
   4: <local:ColumnGroupsBehavior.CommonHeaders>
   5: <local:CommonHeader StartColumnIndex="0" Caption="Vehicle Info" ColumnSpan="2" />
   6: <local:CommonHeader StartColumnIndex="2" Caption="Dimensions (mm)" ColumnSpan="3" />
   7: <local:CommonHeader StartColumnIndex="5" Caption="Total Price" ColumnSpan="1" />
   8: </local:ColumnGroupsBehavior.CommonHeaders>
   9: </local:ColumnGroupsBehavior>
  10: </i:Interaction.Behaviors>
  11: </telerik:RadGridView>

As you can see, when adding a common header we need to set three properties:

StartColumnIndex – defines the first column of the column group

ColumnSpan – tells the header how many columns to unite

Caption – defines the text content of the common header.

 

*We are not limited to text content here. Since the common header is an ordinary user control with its own XAML you can customize it to add any UI elements , images etc.

* This approach has some limitations e.g. column freezing, column reordering  are explicitly disabled by the behavior. We are working on providing this as an internal feature to RadGridView for our  future versions when these limitations will be solved.

 

For your copy/paste needs you can download a 

To have this working in your own project you will have to grab the following :

 

ColumnGroupsBehavior.cs  - the attached behavior itself.

 

CommonHeader.xaml/.cs  - the common header user control. You can modify the XAML within to provide more complex content.

 

SecondaryHeader.xaml/.cs –this is the placeholder for the common headers ( the secondary header row rendered above the ordinary RadGridView header row) . It provides the scrolling & resizing  of the common headers.

 

Additionally you will need a reference to the System.Windows.Interactivity.dll


Comments

Comments are disabled in preview mode.