Apply Light & Dark theme changes to telerikDataGrid rows

[Chiran]

Hi,

I'm trying to apply Light & Dark theme changes to telerikDataGrid rows and headers,

Header code snippet

 <telerikDataGrid:DataGridTextColumn 
                            HeaderText="StartedAt"                                                                
                            PropertyName="StartedAt">
                            <telerikDataGrid:DataGridTextColumn.HeaderStyle>
                                <telerikDataGrid:DataGridColumnHeaderStyle 
                                    IsOptionsButtonVisible="True"
                                    OptionsButtonMargin="0,0,5,0"
                                    BorderThickness="1"/>
                            </telerikDataGrid:DataGridTextColumn.HeaderStyle>
</telerikDataGrid:DataGridTextColumn>

 

<telerikDataGrid:RadDataGrid.RowBackgroundStyle>
     <telerikDataGrid:DataGridBorderStyle
         BackgroundColor="#ffffff"
         BorderColor="#F0EFF3"
         BorderThickness="1" />
</telerikDataGrid:RadDataGrid.RowBackgroundStyle>

 

abouve code snippet has changed to Like this to apply theme changes

<telerikDataGrid:RadDataGrid.RowBackgroundStyle>
      <telerikDataGrid:DataGridBorderStyle
              BackgroundColor="{AppThemeBinding Dark={StaticResource SecondryBackgroundColorLight},
                                            Light={StaticResource SecondryBackgroundColorLight}}"
              BorderColor="{AppThemeBinding Dark={StaticResource MainBorderColorDark},
                                                                            Light={StaticResource ListItemBorderColorLight}}"
              BorderThickness="1" />
</telerikDataGrid:RadDataGrid.RowBackgroundStyle>

 

But above way is not working, is there any working way to set theme changes to the Telerik data grid header body & text,

Please share with me.

 

Thanks...

[Chiran]

Anyone knows the solution please share with me, this's needfull 

[Yana]

Hello Chiran,

You would need to apply the AppThemeBinding to the whole DataGridBorderStyle rather than the color properties like this:

<telerikDataGrid:RadDataGrid.RowBackgroundStyle>
    <AppThemeBinding>
        <AppThemeBinding.Light>
            <telerikDataGrid:DataGridBorderStyle BackgroundColor="White" />
        </AppThemeBinding.Light>
        <AppThemeBinding.Dark>
            <telerikDataGrid:DataGridBorderStyle BackgroundColor="#1E1E1E" />
        </AppThemeBinding.Dark>
    </AppThemeBinding>
</telerikDataGrid:RadDataGrid.RowBackgroundStyle>

Give it a try and let me know if you have further questions on this.

Regards,
Yana
Progress Telerik

[Chiran]

Thanks Yana, It's working,  Love you...

But I need the dark & light theme solution for the header too, to apply border color and background color.

<telerikDataGrid:DataGridTextColumn 
                            HeaderText="StartedAt"                                                                
                            PropertyName="StartedAt">
                            <telerikDataGrid:DataGridTextColumn.HeaderStyle>
                                <AppThemeBinding>
                                    <AppThemeBinding.Light>
                                        <telerikDataGrid:DataGridBorderStyle 
                                            BackgroundColor="#ffffff"
                                            BorderColor="#F0EFF3"
                                            BorderThickness="1"/>
                                    </AppThemeBinding.Light>
                                    <AppThemeBinding.Dark>
                                        <telerikDataGrid:DataGridBorderStyle 
                                            BackgroundColor="#2a3137"
                                            BorderColor="#505d68"
                                            BorderThickness="1"/>
                                    </AppThemeBinding.Dark>
                                </AppThemeBinding>
                                     </telerikDataGrid:DataGridTextColumn.HeaderStyle>
</telerikDataGrid:DataGridTextColumn>

 

above code snippet is not working for the header

[Yana]

The approach is the same, just for HeaderStyle property you would need to apply DataGridColumnHeaderStyle:

<telerikDataGrid:DataGridTextColumn.HeaderStyle>
    <AppThemeBinding>
        <AppThemeBinding.Light>
            <telerikDataGrid:DataGridColumnHeaderStyle 
                    BackgroundColor="#ffffff"
                    BorderColor="#F0EFF3"
                    BorderThickness="1"/>
        </AppThemeBinding.Light>
        <AppThemeBinding.Dark>
            <telerikDataGrid:DataGridColumnHeaderStyle 
                    BackgroundColor="#2a3137"
                    BorderColor="#505d68"
                    BorderThickness="1"/>
        </AppThemeBinding.Dark>
    </AppThemeBinding>
</telerikDataGrid:DataGridTextColumn.HeaderStyle>