DataGrid Styling Header and Alternate Row

[Daniel]

Hi,

1. I would like to style the header of the DataGrid (background color).

2.I would like to style the row  even row in one column and odd row in other color.

Thanks,

 

[Didi]

Hello,

Direct to the points:

1. I would like to style the header of the DataGrid (background color). Please review the DataGrid Header Style section from our documentation: https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/datagrid-columns-styling#headerstyle 

2.I would like to style the row  even row in one column and odd row in other color.

Review the DataGrid Rows Styling: AlternateRowBackgroundStyle and RowBackgroundStyle: https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/datagrid-styling 

If you want to apply a conditional styling review the DataGrid Style Selector topic: https://docs.telerik.com/devtools/maui/controls/datagrid/theming-and-styles/datagrid-style-selectors#style-selectors

Regards,
Didi
Progress Telerik

[Daniel]

1.This not complied:

 <telerikDataGrid:RadDataGrid Grid.Row="4" Grid.Column="0" x:Name="resultsDataGrid"  SelectedItem="{Binding HistoryReportSelectedItem, Mode=TwoWay}"
                AutoGenerateColumns="False"  SelectionMode="Single" SelectionUnit="Row" ItemsSource="{Binding HistoryReportSource, Mode=TwoWay}" >
          
<telerikDataGrid:DataGridTextColumn.HeaderStyle>
    <telerikDataGrid:DataGridColumnHeaderStyle BackgroundColor="LightSkyBlue"
                                               TextColor="Black"
                                               BorderColor="Black"
                                               BorderThickness="2"/>
</telerikDataGrid:DataGridTextColumn.HeaderStyle>

[Didi]

On my side it works as expected: 

<telerikDataGrid:RadDataGrid x:Name="dataGrid" AutoGenerateColumns="False">

            <telerikDataGrid:RadDataGrid.Columns>
                <telerikDataGrid:DataGridTextColumn PropertyName="Country">
                    <telerikDataGrid:DataGridTextColumn.HeaderStyle>
                        <telerikDataGrid:DataGridColumnHeaderStyle BackgroundColor="LightSkyBlue"
                                               TextColor="Red"
                                               BorderColor="Blue"
                                               BorderThickness="2"/>
                    </telerikDataGrid:DataGridTextColumn.HeaderStyle>
                </telerikDataGrid:DataGridTextColumn>
                <telerikDataGrid:DataGridTextColumn PropertyName="Capital"/>
            </telerikDataGrid:RadDataGrid.Columns>
        </telerikDataGrid:RadDataGrid>

Make sure that the header style property is set to the concrete column

 

[Daniel]

i need to style every header.

No option to style all headers in one place in grid level.

[Daniel]

It possible to move the styles (AlternateRowBackgroundStyle + HeaderStyle) to app.xaml , if yes how?

 <telerikDataGrid:DataGridColumnHeaderStyle x:Key="DataGridTextColumnHeaderStyle"
                                               BackgroundColor="LightSkyBlue" 
                                               TextColor="Black"
                                               BorderColor="{StaticResource  PrimaryColor}"
                                               BorderThickness="1"/>  <telerikDataGrid:RadDataGrid  x:Name="routesDataGrid" Margin="10" ItemsSource="{Binding RoutesSource, Mode=TwoWay}" HeightRequest="600"
                AutoGenerateColumns="False"  SelectionMode="Single" SelectionUnit="Row" SelectedItem="{Binding SelectedRouteItem, Mode=TwoWay}">
                    <telerikDataGrid:RadDataGrid.AlternateRowBackgroundStyle>
                        <telerikDataGrid:DataGridBorderStyle BackgroundColor="LightBlue"
                                     BorderThickness="1"
                                     BorderColor="BlanchedAlmond"/>
                    </telerikDataGrid:RadDataGrid.AlternateRowBackgroundStyle>
                    <telerikDataGrid:RadDataGrid.Columns>
                        <telerikDataGrid:DataGridTextColumn PropertyName="ID" HeaderText="#" HeaderStyle="{StaticResource DataGridTextColumnHeaderStyle}"/>
                     ....
                    </telerikDataGrid:RadDataGrid.Columns>
                </telerikDataGrid:RadDataGrid>

 

           

[Lance | Manager Technical Support]

This was answered in your other thread where you asked the same question 4 hours later (but with slightly different words). As I mentioned there, these DataGridBorderStyle objects are not Style objects. You need to treat them as individual instances of objects and not a template-based system that XAML Style are.

Here's a screenshot for you:

A Note About Support Use

Creating multiple posts for the same question is considered spam behavior and such cases can be automatically closed. Please be patient and wait for the engineer to answer your question, this can sometimes take up to 72 hours, so please avoid duplicating your inquiries before then to avoid automatic closure.

Additionally, please take a moment to visit the Fair Use Policy of your license (you're already about 25-30x the average).  I would really like to avoid the situation where you lose access to support engineer responses due to system abuse. A very easy way to prevent this is by not duplicating your posts in the forums.