customizing gridviewheadercell

[Chester]

Hi,

I am trying to edit the apperance of radgridview. However, I cant edit the column header part of it.

Any help would be appreciated, thanks in advance.

[Maya]

Hello Chester,

You may take a look at the following two articles:
1. Styling the Column Headers;
2. Styling the Header Row;
Let me know in case you need any further reference.
 

Best wishes,
Maya
the Telerik team

[Chester]

Thank you :)
I applied the Styling the Column Headers article. However, I'm stuck in this part:

To apply the style to the real headers, set it to the HeaderCellStyle property of the RadGridView columns.

<telerikGrid:GridViewDataColumn Header="ID"
                               DataMemberBinding="{Binding EmployeeID}"
                               HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}" />

Should I add this in my user control xaml for GridView? Would it be better if I send my xaml project to you?

Many Thanks! :)

[Maya]

Hello Chester,

May you provide a bit more details about the problem you encountered ?
Generally, the idea is to define the style in the Resources section of your UserControl for example and set it to the column by the HeaderCellStyle property:

<UserControl.Resources>      

     <Style x:Key="GridViewHeaderCellStyle" TargetType="telerik:GridViewHeaderCell">

        <Setter Property="Background" Value="Tomato" />

     </Style>
</UserControl.Resources>

 

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"

     HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"/>

Let me know in case you need any further assistance. 
 

All the best,
Maya
the Telerik team

[Chester]

Hi Maya :)

Below is the xaml resource code for my customized GridViewHeader style:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:Telerik_Windows_Controls_Chromes="clr namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:SV_Catering_SL"
    xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    x:Class="SV_Catering_SL.MainPage"
    Width="1600" Height="900" mc:Ignorable="d">

    <UserControl.Resources>

        <Style x:Key="SVG_Black_GridViewHeaderCellStyle" TargetType="telerikGridView:GridViewHeaderCell">
            <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF5B5B5B" Offset="1"/>
                        <GradientStop Color="#FF868686"/>
                        <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
                        <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF848484"/>
            <Setter Property="BorderThickness" Value="0,0,1,1"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="5,0,3,0"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
</UserControl.Resources>

And here is my RadGrid:

<telerik:RadGridView Height="200" Margin="445,0,620,80" VerticalAlignment="Bottom"/>

I'm confused in what way should I add your codes in my datagrid. The only parameter available is headerrowstyle.

I hope you can help me with this problem. Thanks :)

- Chester

[Chester]

BTW, I'm using Q2 RadGridview

[Maya]

Hello Chester,

When you are defining a style, you have to options - to apply it explicitly or implicitly. The first one - explicit - means that you have added a x:Key attribute to the style and use it afterwards:

<UserControl.Resources>
     <Style x:Key="GridViewHeaderCellStyle" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Background" Value="Tomato" />
     </Style>
</UserControl.Resources>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
     HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"/>

This style will be applied only to those elements to which you explicitly set it - like in the column "Name" above.
However, if you want this style to be applied for all columns without the need of setting it to each one of them, you may define the style implicitly - just skip defining the x:Key attribute.
As it is your case, if you do not want to specify any columns, but still want to apply the style to their headers, you may try to avoid the x:Key declaration.  
 

Kind regards,
Maya
the Telerik team

[Chester]

So, if I want to define my style implicitly, what will be the code for that?

[Maya]

Hello Chester,

As mentioned previously, all you need to do for implicitly setting the style is to remove the x:Key attribute in its definition.
 

Greetings,
Maya
the Telerik team

[Chester]

Yehey! Thanks! Ive finally done it :)

Just another thing, my specifications for this project is to have 2 styles of radgridview (see attached image). A radgridview inside a radgridview.

If I'm going to design the 2nd radgrid, will it be better if I create it on another xaml file? If not, how will I set the differences for each gridviewheader style? Since Im using a dark one (finished), and later I'll be building a lighter one.

Many many thanks :) :) :)

Chester

[Maya]

Hi Chester,

In this case you may define the Style in the Resources section of each RadGridView:

<telerik:RadGridView Name="playersGrid"
                                     ItemsSource="{Binding Players}"
                                     AutoGenerateColumns="False">
                    <telerik:RadGridView.Resources>
                        <Style TargetType="telerik:GridViewHeaderCell">
                            <Setter Property="Background" Value="Tomato" />
                        </Style>
                    </telerik:RadGridView.Resources>
</telerik:RadGridView>

I am sending you a sample project illustrating the proposed solution.
 

Kind regards,
Maya
the Telerik team

[Chester]

Hi Maya,

Thanks for the help! I was able to modify the radgrid in my project :-)

Can you help me again? I encountered this problem with the current/selected state for row styles. In my rad grid, I am using a row style and alternating row style. Both have same visual styles when a user selects the entire row. However, Ive noticed that the select state is only shown in the top most row of the grid and does not apply with the other rows. I'm confused on how will I resolve this problem.

I want to achieve the effect of :
- Users can select rows.
- When user hovers on other rows, a visual style for currently selected row will appear

I'm hoping that you'll help me again as always. :-)
Thank you in advance! :-)

Chester

[Milan]

Hi Chester,

It would be great if you could send us a sample application with your custom styles applied. It would be really difficult to help you without having a look at the actual styles and the way they are applied to the grid.

Best wishes,
Milan
the Telerik team