Format the header of the RadGridView

4 posts, 0 answers
  1. Carl
    Carl avatar
    11 posts
    Member since:
    Sep 2015

    Posted 31 Mar Link to this post

    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.  

     

  2. Martin Vatev
    Admin
    Martin Vatev avatar
    90 posts

    Posted 05 Apr Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Carl
    Carl avatar
    11 posts
    Member since:
    Sep 2015

    Posted 06 Apr in reply to Martin Vatev Link to this post

    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>

  5. Martin Vatev
    Admin
    Martin Vatev avatar
    90 posts

    Posted 11 Apr Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top