Format the header of the RadGridView

[Carl]

I am trying to format the header of the RadGreidView

 

I

 

            <telerik:RadGridView Margin="10" 
                                 x:Name="safeDataGridView" 
                                 HorizontalAlignment="Stretch" 
                                 VerticalAlignment="Stretch" 
                                 ItemsSource="{Binding QueryTable}" 
                                 ScrollViewer.VerticalScrollBarVisibility="Visible" 
                                 ScrollViewer.HorizontalScrollBarVisibility="Visible" 
                                 RowLoaded="safeDataGridView_RowLoaded" 
                                 Loaded="safeDataGridView_Loaded" >
                <telerik:RadGridView.HeaderRowStyle>
                    <Style TargetType="telerik:HeaderRowStyle">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="0.0" Color="#373638" />
                                    <GradientStop Offset="1.0" Color="#77797B" />
                                </LinearGradientBrush>
                            </Setter.Value>

                        </Setter>
                    </Style>                 
                </telerik:RadGridView.HeaderRowStyle>
            </telerik:RadGridView>

 

I am fcoming unstuck with the line <Style TargetType="telerik:HeaderRowStyle">.  Am I going in the right direction with this and if not could I have a similar simple example of how it is done correctly please.  

 

[Martin]

Hi Carl,

 Thank you for contacting us.

 To achieve the desired behavior, please take a look at the Styling Header Row article where you can find detailed information on the matter. But keep in mind that if you want to change a whole header row, you should also style the column headers. 

Also, you may take a look at the code snippet below which will be helpful:

<Style TargetType="telerik:GridViewHeaderCell">

<Setter Property="Background">

      <Setter.Value>

            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <GradientStop Offset="0.0" Color="Red" />

                <GradientStop Offset="1.0" Color="Green" />

             </LinearGradientBrush>

      </Setter.Value>

 </Setter>

</Style>


I hope this helps. If further assistance is needed, please feel free to get back to us.

Regards,
Martin Vatev
Telerik

[Carl]

Hi Martin

Good post so far 

If I use the code below I get what is seen in the attached image.  There are regions that remain black and I would expect that.  How do I access them to apply the same formatting?

Kind regards

 

Carl

 

 

<Color x:Key="HeadertextColour">#FFFCF2</Color>
        <Color x:Key="HeaderTriColour3">#C0C0C0</Color>
        <Color x:Key="HeaderTriColour1">#6A8CB0</Color>
        <Color x:Key="HeaderTriColour2">#99B4D1</Color>

        <SolidColorBrush x:Key="tabfontBrush" Color="{StaticResource HeadertextColour}"/>

        <Style TargetType="telerik:GridViewHeaderCell" x:Name="Heading">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0.0" Color="{StaticResource HeaderTriColour1}" />
                        <GradientStop Offset="0.5" Color="{StaticResource HeaderTriColour2}" />
                        <GradientStop Offset="0.6" Color="{StaticResource HeaderTriColour3}" />
                        <GradientStop Offset="1.0" Color="{StaticResource HeaderTriColour1}" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="{StaticResource tabfontBrush}"/>
        </Style>

[Martin]

Hello Carl,

For your convenience, I prepared an example to demonstrate how to style the entire header row.
Please take a look at the implementation and consider how this approach fits your scenario.

I hope that this helps. Should you have any other questions, do not hesitate to contact us.

Regards,
Martin Vatev
Telerik