DataGrid Styling Header and Alternate Row

1 Answer 96 Views
DataGrid
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 15 Mar 2022, 12:15 PM | edited on 15 Mar 2022, 12:15 PM

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,

 

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 16 Mar 2022, 12:07 PM

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 RowBackgroundStylehttps://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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 16 Mar 2022, 01:01 PM | edited

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
Telerik team
commented on 18 Mar 2022, 06:05 AM

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
Top achievements
Rank 1
Silver
Bronze
commented on 18 Mar 2022, 11:21 AM

i need to style every header.

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

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 03 Apr 2022, 10:46 AM

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
Telerik team
commented on 05 Apr 2022, 07:29 PM | edited

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.

 

Tags
DataGrid
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Didi
Telerik team
Share this question
or