Column Header Font Style

[mark]

I know this is probably simple, but how do I set the Header Text style like font color, size, etc.  I changed the foregroundcolor for the grid and that changed the color for all text in the grid, but how do I just affect the Column Headers?  I see

HeaderCellStyle.SetValue(

), but I don't know what the values should be or how it works.

Thanks

[Kalin Milanov]

Hello Mark,

You can easily style the HeaderCell text by creating a style and applying it to the HeaderCellStyle property of your column.

Here is a sample XAML showing you the properties you can tweak:

<Style x:Key="MyHeaderCellStyle" TargetType="telerik:GridViewHeaderCell">
      <Setter Property="Foreground" Value="Red" />
      <Setter Property="FontSize" Value="20" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="FontStyle" Value="Italic" />
</Style>

To set this style to your column headers either to it in XAML by:

<telerikGridView:RadGridView x:Name="RadGridView1">
    <telerikGridView:RadGridView.Columns>
        <telerikGridView:GridViewDataColumn HeaderCellStyle="{StaticResource MyHeaderCellStyle}"/>
        <telerikGridView:GridViewDataColumn HeaderCellStyle="{StaticResource MyHeaderCellStyle}"/>
    </telerikGridView:RadGridView.Columns>
</telerikGridView:RadGridView>

or in code by:

void RadGridView1.DataLoaded(object sender, EventArgs e)
{
   foreach (var col in RadGridView1.Columns)
   {
       col.HeaderCellStyle = (Style)this.Resources["MyHeaderCellStyle"];
   }
}

This should do the trick.

All the best,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[G]

Does this work for the current trial version?

I'm unable to get this fairly basic example working.

[Kalin Milanov]

Hello G,

I could not reproduce any problems in setting the font style. Please review the attached sample application which demonstrates setting the style both in XAML and in code. Also please note that the CS should be different depending on where you declare your style. 

I hope this will bring some clarity in the situation.

All the best,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Marc Roussel]

Need Blend 3 example without having to write xaml by hand.
This would be greatly apreciated.

[Mike Lee]

Hi Kalin, is it possible to give a style to all the GridViewDataColumns without having to do this?

    <telerikGridView:RadGridView.Columns>
        <telerikGridView:GridViewDataColumn HeaderCellStyle="{StaticResource MyHeaderCellStyle}"/>
        <telerikGridView:GridViewDataColumn HeaderCellStyle="{StaticResource MyHeaderCellStyle}"/>
    </telerikGridView:RadGridView.Columns>

I tried using HeaderRowStyle to change the header background, but it doesn't work.

    <UserControl.Resources>
        <Style x:Key="MyHeaderRowStyle1" TargetType="controls:GridViewHeaderRow">
            <Setter Property="Background" Value="Red" />
        </Style>
    </UserControl.Resources>


    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadGridView x:Name="RadGridView1" HeaderRowStyle="{StaticResource MyHeaderRowStyle1}" >
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn UniqueName="ID"  />
                <telerik:GridViewDataColumn UniqueName="ID" />
                <telerik:GridViewDataColumn UniqueName="ID"  />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

[Kalin Milanov]

Hello Mike Lee,

You can set the HeaderCellStyle in the code behind and let the grid to automatically generate its columns. As for the header row - I was unable to reproduce the error as the style gets applied. Could you please send me a sample which reproduces the problem.

Also attached I am sending you a sample demonstrating both issues.

Greetings,
Kalin Milanov
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.

[Mike Lee]

Hi Kalin, thanks for responding.  Your code-behind solution works, but I don't want to insert that code behind for every grid in my project.  I want to create a style that all my grids can use.  If I run the project you sent without the code-behind, I get the default Office Black theme for the columns that have data.  The coloring of the row works using HeaderRowStyle, but the populated columns have header rows in the Office Black Theme.  I want to have control over the column header colors when it's populated.  Here's the sample:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" xmlns:Telerik_Windows_Controls_GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    x:Class="HeaderRow.MainPage"
    Width="640" Height="480">

    <UserControl.Resources>
        <Style x:Key="MyHeaderRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderRow">
            <Setter Property="Background" Value="Red" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <telerikGridView:RadGridView x:Name="gridView" HeaderRowStyle="{StaticResource MyHeaderRowStyle}" ItemsSource="{Binding Collection}" />
    </Grid>
</UserControl>

Attached is the screen shot showing the populated column headers in Office Black.

[Kalin Milanov]

Hi Mike Lee,

Unfortunately with Silverlight 3 you cannot define implicit style (unlike WPF) which will automatically apply to the respective elements. Therefore you will need to somehow set the style either in XAML or in code.
Fortunately this feature is being added to Silverlight 4, which will be available on 12th April.

All the best,
Kalin Milanov
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.

[Sonal]

Hi,

We have textBlock that is being added in a telrik grid(1st row and 1st Colum). This block has been given the font weight as bold.

TextBlock block = new TextBlock();

block.Margin = new Thickness(HeaderMargin2, 0, 0, 0);

block.Text = "Text";

block.FontSize = 13;

block.FontWeight = FontWeights.Bold;
When page is loaded for first time, font weight is fine but on reload(due to some selection changed or any other event) the text in textBlock gets bolder.
On second reload it is again normal and on next reload it get bolder. It gets bold and bolder on alternate reload. Please let me know how can I seal my style.
FYI.. I tried style.seal(), it is not working.

Thanks,
Sonal