This is a migrated thread and some comments may be shown as answers.

customizing gridviewheadercell

12 Answers 256 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Chester
Top achievements
Rank 1
Chester asked on 22 Mar 2011, 08:19 AM
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.

12 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 22 Mar 2011, 08:32 AM
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
0
Chester
Top achievements
Rank 1
answered on 22 Mar 2011, 09:14 AM
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! :)
0
Maya
Telerik team
answered on 22 Mar 2011, 11:34 AM
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
0
Chester
Top achievements
Rank 1
answered on 23 Mar 2011, 02:34 AM
Hi Maya :)

Below is the xaml resource code for my customized GridViewHeader style:
    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"
    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
0
Chester
Top achievements
Rank 1
answered on 23 Mar 2011, 04:26 AM
BTW, I'm using Q2 RadGridview
0
Maya
Telerik team
answered on 23 Mar 2011, 09:10 AM
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
0
Chester
Top achievements
Rank 1
answered on 23 Mar 2011, 09:45 AM
So, if I want to define my style implicitly, what will be the code for that?
0
Maya
Telerik team
answered on 23 Mar 2011, 09:48 AM
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
0
Chester
Top achievements
Rank 1
answered on 23 Mar 2011, 10:02 AM
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
0
Maya
Telerik team
answered on 23 Mar 2011, 10:35 AM
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
0
Chester
Top achievements
Rank 1
answered on 30 Mar 2011, 04:02 AM
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
0
Milan
Telerik team
answered on 04 Apr 2011, 08:18 PM

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
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
Tags
GridView
Asked by
Chester
Top achievements
Rank 1
Answers by
Maya
Telerik team
Chester
Top achievements
Rank 1
Milan
Telerik team
Share this question
or