Styling the column headers

7 posts, 0 answers
  1. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 15 Apr 2011 Link to this post

    Hi, could you give me some assistance in how I can restyle the column header. I have the following code, however I am still getting a border around the columns and there is still a blank area to the left of the columns, basically I just want the columns to show with a header of #ffd4e4a5 with no borders;

    <UserControl x:Class="GridUserControl"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 >
        <UserControl.Resources>
            <Style x:Key="GridViewHeaderRowStyle1" TargetType="{x:Type telerik:GridViewHeaderCell}">
                <Setter Property="Background"
                        Value="#FFD4E4A5" />
                <Setter Property="Foreground" Value="DarkGreen" />
                <Setter Property="BorderBrush"
                        Value="#FFD4E4A5" />
                <Setter Property="BorderThickness"
                        Value="0" />
            </Style>
            <Style x:Key="GridViewHeaderRowStyle2"
                   TargetType="{x:Type telerik:GridViewHeaderRow}">
                <Setter Property="Background"
                        Value="#FFD4E4A5" />
                <Setter Property="Foreground"
                        Value="DarkGreen" />
                <Setter Property="BorderBrush"
                        Value="#FFD4E4A5" />
                <Setter Property="BorderThickness"
                        Value="0" />
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <telerik:RadGridView HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 GroupPanelBackground="#FFD4E4A5"
                                 ColumnBackground="#FFD4E4A5"
                                 HeaderRowStyle="{DynamicResource GridViewHeaderRowStyle2}"
                                  
                                 >
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn Header="Date sent"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}"  />
                    <telerik:GridViewDataColumn Header="Customer"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}" />
                    <telerik:GridViewDataColumn Header="Invoice Number"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}" />
                    <telerik:GridViewDataColumn Header="Description"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}" />
                    <telerik:GridViewDataColumn Header="Amount"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}" />
                    <telerik:GridViewDataColumn Header="Status"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}" />
                    <telerik:GridViewDataColumn Header="Action"
                                                HeaderCellStyle="{DynamicResource GridViewHeaderRowStyle1}" />
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </Grid>
    </UserControl>
  2. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 15 Apr 2011 Link to this post

    Also how do I change the highlight colour when the user moves the cursor over the columns?

    Thanks
    Paul
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1128 posts

    Posted 18 Apr 2011 Link to this post

    Hi Paul,

    I have prepared  a sample project for you. Please, refer to it and inform us if this approach meets your requirements.

    Regards,
    Ivan Ivanov
    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
  5. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 20 Apr 2011 Link to this post

    Hi, many thanks for that I managed to get most of the information fro the help guide [better if you look at this first!]. I have now managed to do the relevant styling however, under the columns I want to add a custom button bar. Therefore the columns will show and the first line would be the button bar and then the relevant row details would be shown, could you advise how I can get this to function?

    {Group Panel}
    {Column Headers}
    {Button Bar Grid }
    {Row Details}

    Many thanks
    Paul
  6. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1128 posts

    Posted 20 Apr 2011 Link to this post

    Hello Paul,

    In order to achieve this order, you have to predefine GridViewHeaderRow's template. Please, refer to the attached project.


    Greetings,
    Ivan Ivanov
    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
  7. Sergey
    Sergey avatar
    9 posts
    Member since:
    Sep 2016

    Posted 23 Sep Link to this post

    Hi, is it possible to highlight column header when mouse over a cell in that column, just like row hightlighted?
  8. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 28 Sep Link to this post

    Hello Sergey,

    There is no out-of-the-box mechanism for applying such customization. A possible solution for it would be to subscribe to the MouseEnter event of GridViewCell through an EventSetter.
    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"  >
        <telerik:GridViewDataColumn.CellStyle>
        <Style TargetType="telerik:GridViewCell">
            <EventSetter Event="MouseEnter"
                         Handler="Cell_MouseEnter" />
        </Style>
        </telerik:GridViewDataColumn.CellStyle>
    </telerik:GridViewDataColumn>


    Then in the event handler method you can access the column through the cell.
    private void Cell_MouseEnter(object sender, RoutedEventArgs e)
    {
        var cell = e.OriginalSource as GridViewCell;
        if (cell != null)
        {
            var column = cell.DataColumn;
        }
    }

    As soon as you have access to the column, you can modify its header as per your requirement.

    Hopefully, this helps.

    Regards,
    Stefan X1
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready