How to change title row background

[zhiwei]

Hello, I have two question about Grid View.

 

Q1. How to change background color of the title row? I’d tried to change the background color of some columns’ title, but the first column’s background and the border are still black.

 

Q2. I also don’t know how to change the background of the child table.

 

Thank you!

Zhiwei.

[Vanya Pavlova]

Hi Zhiwei,

You will need to define a simple style or to edit the template of the GridViewHeaderRow and set the Background property to the desired color. Afterwards, using its Key attribute, you may set it explicitly in the RadGridView. 
Considering your second question, you have to change the background of the Border element around the PART_HierarchyChildPresenter within the style of the GridViewRow (please refer to the attached picture).


Greetings,
Vanya Pavlova
the Telerik team

[zhiwei]

Thank you for your reply, please forgive my less experience, I have another question, how to change the border color of the header data column,can it be setting in the template? If not , please tell me how to set it in the column definition.

Thank you very much!

[Vanya Pavlova]

Hello Zhiwei,

 

In this case you have to style the GridViewHeaderCell elements in RadGridView. You may change their appearance either by creating a simple style targeted at GridViewHeaderCell or by editing its template.
This style can be applied to all columns using an implict style or by setting this style in the corresponding column:

Copy Code

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <Grid.Resources>
            <Style x:Key="style1" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="BorderThickness" Value="0"/>
        </Style>
        </Grid.Resources>
       <telerik:RadGridView  Margin="40,24,88,72" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="EmployeeName" HeaderCellStyle="{StaticResource style1}" DataMemberBinding="{Binding Property3}"/>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
    </Grid>

You may notice that this simple style changes only the outer border of GridViewHeaderCell, if you need to change its inner border you have to edit its template, this rule is valid for most RadGridView's parts.

Kind regards,
Vanya Pavlova
the Telerik team

[zhiwei]

Hello telerik,

Could you show me an example of how to change header cell's inner border. Thank you very much!

Best regards!

[Vanya Pavlova]

Hi zhiwei,

 
I would suggest you to review our online documentation that describes the template structure of different RadGridView's parts, please follow this link.

Also you may find attached sample project that demonstrates the approach above.

Greetings,
Vanya Pavlova
the Telerik team