Headers for Column Groups in UI for Silverlight GridView

Kevin Blanton

9 posts

Member since:
Sep 2012

Posted 28 Apr 2010 Link to this post

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

gridheader.JPG

Pavel Pavlov

Admin

2039 posts

Posted 28 Apr 2010 Link to this post

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

88 posts

Member since:
Aug 2008

Posted 26 Apr 2011 Link to this post

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

Admin

2039 posts

Posted 29 Apr 2011 Link to this post

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

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

Ernie S

33 posts

Member since:
Apr 2014

Posted 02 Dec 2014 Link to this post

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

Admin

3769 posts

Posted 03 Dec 2014 Link to this post

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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.