This is a migrated thread and some comments may be shown as answers.

Styling the column headers

6 Answers 462 Views
GridView
This is a migrated thread and some comments may be shown as answers.
plusHR
Top achievements
Rank 1
plusHR asked on 15 Apr 2011, 03:41 PM
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>

6 Answers, 1 is accepted

Sort by
0
plusHR
Top achievements
Rank 1
answered on 15 Apr 2011, 03:45 PM
Also how do I change the highlight colour when the user moves the cursor over the columns?

Thanks
Paul
0
Ivan Ivanov
Telerik team
answered on 18 Apr 2011, 12:42 PM
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
0
plusHR
Top achievements
Rank 1
answered on 20 Apr 2011, 11:18 AM
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
0
Ivan Ivanov
Telerik team
answered on 20 Apr 2011, 04:05 PM
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
0
Sergey
Top achievements
Rank 1
answered on 23 Sep 2016, 10:51 AM
Hi, is it possible to highlight column header when mouse over a cell in that column, just like row hightlighted?
0
Stefan
Telerik team
answered on 28 Sep 2016, 10:52 AM
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.
Tags
GridView
Asked by
plusHR
Top achievements
Rank 1
Answers by
plusHR
Top achievements
Rank 1
Ivan Ivanov
Telerik team
Sergey
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or