Apply Light & Dark theme changes to telerikDataGrid rows

1 Answer 375 Views
DataGrid
Chiran
Top achievements
Rank 1
Iron
Iron
Chiran asked on 09 Aug 2021, 12:11 PM | edited on 09 Aug 2021, 12:14 PM

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
Top achievements
Rank 1
Iron
Iron
commented on 10 Aug 2021, 05:41 AM

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

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 11 Aug 2021, 10:47 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Chiran
Top achievements
Rank 1
Iron
Iron
commented on 11 Aug 2021, 11:33 AM | edited

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
Telerik team
commented on 11 Aug 2021, 12:58 PM

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>

Tags
DataGrid
Asked by
Chiran
Top achievements
Rank 1
Iron
Iron
Answers by
Yana
Telerik team
Share this question
or