Styling the column headers

[plusHR]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             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>

[plusHR]

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

Thanks
Paul

[Ivan Ivanov]

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

[plusHR]

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

[Ivan Ivanov]

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

[Sergey]

Hi, is it possible to highlight column header when mouse over a cell in that column, just like row hightlighted?

[Stefan]

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