Headers for Column Groups

[Kevin Blanton]

We are in the process of rewriting and old VB 6 app in silverlight.  We are using the Telerik GridView control for the data grids.

In the old application we were able to have several groups of columns that head a common group header.

I have attached a screenshot with an example of what we are trying to accomplish.

Is it possible to do this with the Telerik GridView?

Thanks for your assistance,

Kevin

[Pavel Pavlov]

Hello Kevin Blanton,

This feature is not yet integrated in RadGridVIew. However with the help of some external code it is achievable.
Please review the approach demonstrated in my blogpost . I believe it will help you decide whether this is applicable for your project.

Regards,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Henri]

Hi,

I implemented the code mentioned in the blog post.
I'm using the latest version of the Controls (2011 Q1 SP1).

My problem is the following.
The content of my headers is dynamic, and therefor I did the binding in the HeaderCellStyle. How can I achieve the same thing in the secondary header? My present code looks like this...

                            <telerik:GridViewDataColumn Width="65" IsFilterable="False" CellStyle="{StaticResource GridCellStyle}">
                                    <telerik:GridViewDataColumn.HeaderCellStyle>
                                    <Style TargetType="telerik:GridViewHeaderCell">
                                        <Setter Property="Background" Value="LightYellow"/>
                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                        <Setter Property="Margin" Value="0"/>
                                        <Setter Property="Padding" Value="0,0,0,0"/>
                                        <Setter Property="Foreground" Value="Black"/>
                                        <Setter Property="BorderThickness" Value="0"/>
                                        <Setter Property="ContentTemplate">
                                            <Setter.Value>
                                                <DataTemplate>
                                                    <Grid>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition></RowDefinition>
                                                            <RowDefinition></RowDefinition>
                                                        </Grid.RowDefinitions>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition></ColumnDefinition>
                                                        </Grid.ColumnDefinitions>
                                                        <Border BorderBrush="Gray" BorderThickness="0,0,0,1">
                                                            <TextBlock TextAlignment="Right" Padding="0,0,5,0" Text="{Binding Text, ElementName=month1}" FontWeight="Bold"/>
                                                        </Border>
                                                        <Border BorderBrush="Gray" BorderThickness="0,0,1,0" Grid.Row="1">
                                                            <TextBlock TextAlignment="Center" Text="Plan" FontWeight="Bold"/>
                                                        </Border>
                                                    </Grid>
                                                </DataTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                    </telerik:GridViewDataColumn.HeaderCellStyle>
                                <telerik:GridViewDataColumn.CellTemplate>
                                                <DataTemplate>
                                                    <Border BorderBrush="Black" BorderThickness="1,0,0,0" Padding="2,0,2,0" Background="{Binding Back1}">
                                                        <TextBlock Text="{Binding Plan1,StringFormat=N}" TextAlignment="Right"/>
                                                    </Border>
                                                </DataTemplate>
                                </telerik:GridViewDataColumn.CellTemplate>
                                <telerik:GridViewDataColumn.CellEditTemplate>
                                    <DataTemplate>
                                        <Border BorderBrush="Black" BorderThickness="1,0,0,0" Padding="2,0,2,0" Background="{Binding Back1}">
                                            <TextBox Text="{Binding Plan1,StringFormat=N,Mode=TwoWay}" TextAlignment="Right" IsReadOnly="{Binding CanEdit1}"/>
                                        </Border>
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellEditTemplate>
                            </telerik:GridViewDataColumn>

[Pavel Pavlov]

Hello Henri,

Since the attached behavoir is not a real visual element , it does not participate in the Namescope of the visual tree, so indeed something like Caption={Binding Text, ElementName ... } is not expected to work .

The only alternative I can think off is to set the binding by code
e.g.  Modify the following method  in SecondaryHeaderXaml.cs, adding the yellow line.

private void PlaceCommonHeaders()
        {
            if (this.CommonHeaders.Count > 0 && this.CommonHeaders[0].Parent != null)
                return;

            foreach (var commonHeader in this.CommonHeaders)
            {
                commonHeader.SetValue(Grid.ColumnSpanProperty, commonHeader.ColumnSpan);
                commonHeader.SetValue(Grid.ColumnProperty, commonHeader.StartColumnIndex);

                commonHeader.SetBinding(CommonHeader.CaptionProperty, new Binding("Text"){ Source = XXXXXX);
                this.SecondaryHeadersGrid.Children.Add(commonHeader);
            }

            CommonHeader lastEmptyHeader = new CommonHeader();
            lastEmptyHeader.SetValue(Grid.ColumnProperty, this.SecondaryHeadersGrid.ColumnDefinitions.Count);
            this.SecondaryHeadersGrid.Children.Add(lastEmptyHeader);

        }

* Replace XXXXX, with a refference to the source for the binding.

Best wishes,
Pavel Pavlov
the Telerik team

[Ernie S]

Hi.

Was this every implemented in a later version of the control?  Looking to do the same thing. 

The link above is broken, here is the new one:

http://blogs.telerik.com/xamlteam/posts/09-12-04/adding-additional-power-to-radgridview-for-silverlight-with-attached-behaviors.aspx

Thanks
Ernie

[Dimitrina]

Hi,

The closest solution to your requirement I can suggest is our Merged Column Headers. You can follow the documentation in this help article, where you can find details on how to define column header groups. 

I hope this helps.

Regards,
Dimitrina
Telerik