Changing Forground Color and Font for all SfDataGrid cells and headers at once

[Anas El Hallabi]

Hello,

I would like to know if it is possible to change the Forground Color and Font of the SfDataGrid Cells all at once. Actually, I developped a dialog window where the user chooses the font and the color that he wants for the SfDataGrid cells (also for stacked headers and column headers). The screen is binded to a ViewModel. What is the properties of the SfDataGrid that i need to bind to my ViewModel to achieve that ? The ViewModel contains those properties: FontFamily, FontWeight, Color and FontSize.

Thank you for your help.

[Akila Rajaram]

Hi Anas ,

Thank you for using Syncfusion Products .

Yes , it is possible to change the style of  SfDataGrid  cell ,header and stacked header . Please find the responses for your requirement ,

Query : What is the properties of the SfDataGrid that i need to bind to my ViewModel to achieve that ?

Customize the style of GridCell :

SfDataGrid.CellStyle property can be used to customize  the style of the cell with TargetType as GridCell . Please refer the below code snippet ,

XAML :

<Style x:Key="cellstyle" TargetType="syncfusion:GridCell">

    <Setter Property="FontWeight" Value="{Binding CellFontWeight,Source={StaticResource viewmodel}}"/>

    <Setter Property="FontFamily" Value="{Binding CellFontFamily,Source={StaticResource viewmodel}}"/>

    <Setter Property="Background" Value="{Binding CellBackground,Source={StaticResource viewmodel}}"/>

    <Setter Property="FontSize" Value="{Binding CellFontSize,Source={StaticResource viewmodel}}"/>
</Style>

<syncfusion:SfDataGrid x:Name="grid"

                        AllowEditing="True"

                        AllowFiltering="True"

                        AllowSorting="True"

                        HeaderRowHeight="30"

                        CellStyle="{StaticResource cellstyle}"

                        AutoGenerateColumns="False"

                        ItemsSource="{Binding Stud}"
                        SelectionMode="Single">

Please refer the below UG document  for more information about  cell style ,

Link : http://help.syncfusion.com/ug/wpf/Documents/stylingcells.htm

Customizing the style of  header :

You can customize the style of header cell  by using SfDataGrid.HeaderStyle property . Please refer the below code snippet ,

XAML :

<Style x:Key="headerstyle" TargetType="syncfusion:GridHeaderCellControl">

    <Setter Property="FontWeight" Value="{Binding HeaderFontWeight,Source={StaticResource viewmodel}}"/>

    <Setter Property="FontFamily" Value="{Binding HeaderFontFamily,Source={StaticResource viewmodel}}"/>

    <Setter Property="Background" Value="{Binding HeaderBackground,Source={StaticResource viewmodel}}"/>

    <Setter Property="FontSize" Value="{Binding HeaderFontSize,Source={StaticResource viewmodel}}"/>
</Style>

<syncfusion:SfDataGrid x:Name="grid"

                        AllowEditing="True"

                        AllowFiltering="True"

                        AllowSorting="True"

                        HeaderRowHeight="30"

                        HeaderStyle="{StaticResource headerstyle}"                              

                        AutoGenerateColumns="False"

                        ItemsSource="{Binding Stud}"
                        SelectionMode="Single">

Please refer the below KB link for more information about header style ,

Link : https://www.syncfusion.com/kb/3475/how-to-apply-custom-style-for-gridheadercellcontrol


Customizing the style of stacked header cell  :

You can customize the style of stacked header  by customizing it style with target type as GridStackedHeaderCellControl . Please refer the below  code snippet ,

XAML :

<Style TargetType="syncfusion:GridStackedHeaderCellControl">

    <Setter Property="FontWeight" Value="{Binding StackedHeaderFontWeight,Source={StaticResource viewmodel}}"/>

    <Setter Property="FontFamily" Value="{Binding StackedHeaderFontFamily,Source={StaticResource viewmodel}}"/>

    <Setter Property="Background" Value="{Binding StackedHeaderBackground,Source={StaticResource viewmodel}}"/>

    <Setter Property="FontSize" Value="{Binding StackedHeaderFontSize,Source={StaticResource viewmodel}}"/>
</Style>

We have prepared the sample based on your requirement . Please find the sample from the following location ,

Sample : http://www.syncfusion.com/downloads/support/forum/119792/ze/SfDataGrid_Sample_119792323490448

Please let us know if you require further assistance on this .

Regards ,
Akila R.

[Anas El Hallabi]

Thank you for your reponse, i was indeed able to set the color, FontFamily, FontWeight, FontStrech, FontStyle and FontSize of the sfdatagrid cells and headers.

One question is remaning thow, how can i change the Text decorations inside the GridCells ? I believe that the GridCell doesn't have this property.

Thank you again.

Anas

[Akila Rajaram]

Hi Anas ,

Thanks for the update . Please find the responses for your query .

Query : how can i change the Text decorations inside the GridCells ?

We  regret to inform you that GridCell don’t have TextDecorations property because its derived from ContentControl . You can overcome this by setting TextDecorations property at column level . We have modified the sample to achieve your requirement . Please find the sample from the below location ,

Sample : http://www.syncfusion.com/downloads/support/forum/119792/ze/SfDataGrid_Sample_119792_Modified1527189667

Please refer the following code example ,

XAML :

<syncfusion:GridTextColumn HeaderText="Roll No"

                           MappingName="Rollno"
                           TextDecorations="Strikethrough" />

Please refer the below msdn link for your reference ,

Link : https://social.msdn.microsoft.com/Forums/vstudio/en-US/c61915c1-e094-426f-b3f0-12fc8efa79c9/wpf-contentcontrol-textdecorations?forum=wpf

Please let us know if you require further assistance on this .

Regards,
Akila R.

[Anas El Hallabi]

Hello Akila R.

I was able to modify text decorations as i wanted. Thank you for the quick response.

Anas

[Akila Rajaram]

Hi Anas,

Thanks for the update . Please let us know if you require further assistance on this .

Regards,
Akila R.

[Amir Oveisi]

HiI'm doing exactly what you suggested here, but my grid cell's FontFamily doesn't change at all. FontWeight, FontStyle, Background and ... works, but FontFamily doesn't work. is there any tips that can help?Thanks     UPDATE:when i remove the part of my code in XAML that sets the VisualStyle of Window to Metro, FontFamily and Foreground works fine. so my problem is with Metro ro any other themes. how can i have Metro theme and be able use my own fonts for GridCell too?

[Muthukumar Kalyanasundaram]

Hi Amir, 

Thanks for the update. 

We have checked your query. We are unable to reproduce the reported “Changing background color and font for all cells in SfDataGrid” in our end. For your reference, we have attached the sample in below location.   

Sample: http://www.syncfusion.com/downloads/support/forum/119792/ze/SfDataGrid_Sample-2114861696 

If you are still facing the issue, could you please revert by modifying the attached sample based on your application along with the replication procedure?  And also, could you please conform your essential studio version ?. This would be helpful for us to provide an appropriate solution.  

Please let us know if you have any query. 

Regards, 

Muthukumar K 

[Harvey Brofman]

Hello. Does anyone know how to do this in code instead of XAML? I'd like to be able to change the fontsize.

thanks

Harvey Brofman

[Vijayarasan Sivanandham]

Hi Harvey Brofman,

Thanks for the update.

You can change the font size ,font family, font weight, BackGround  of all the record cells , header cells and stacked header cells in the SfDataGrid by including style for GridCell , GridHeaderCellControl and GridStackedHeaderCellControl in code as shown in the below for your reference, 

             var dataContext = this.DataContext as StudentCollection; 

 

            Style gridCellStyle = new Style(typeof(GridCell)); 

            gridCellStyle.Setters.Add(new Setter(GridCell.FontWeightProperty, dataContext.CellFontWeight)); 

            gridCellStyle.Setters.Add(new Setter(GridCell.FontFamilyProperty, dataContext.CellFontFamily)); 

            gridCellStyle.Setters.Add(new Setter(GridCell.BackgroundProperty, dataContext.CellBackground)); 

            gridCellStyle.Setters.Add(new Setter(GridCell.FontSizeProperty, dataContext.CellFontSize)); 

 

            grid.CellStyle = gridCellStyle; 

 

            Style headerCellStyle = new Style(typeof(GridHeaderCellControl)); 

            headerCellStyle.Setters.Add(new Setter(GridHeaderCellControl.FontWeightProperty, dataContext.HeaderFontWeight)); 

            headerCellStyle.Setters.Add(new Setter(GridHeaderCellControl.FontFamilyProperty, dataContext.HeaderFontFamily)); 

            headerCellStyle.Setters.Add(new Setter(GridHeaderCellControl.BackgroundProperty, dataContext.HeaderBackground)); 

            headerCellStyle.Setters.Add(new Setter(GridHeaderCellControl.FontSizeProperty, dataContext.HeaderFontSize));             

 

            grid.HeaderStyle = headerCellStyle;                        

 

            Style stackedHeaderCellStyle = new Style(typeof(GridStackedHeaderCellControl)); 

            stackedHeaderCellStyle.Setters.Add(new Setter(GridStackedHeaderCellControl.FontWeightProperty, dataContext.StackedHeaderFontWeight)); 

            stackedHeaderCellStyle.Setters.Add(new Setter(GridStackedHeaderCellControl.FontFamilyProperty, dataContext.StackedHeaderFontFamily)); 

            stackedHeaderCellStyle.Setters.Add(new Setter(GridStackedHeaderCellControl.BackgroundProperty, dataContext.StackedHeaderBackground)); 

            stackedHeaderCellStyle.Setters.Add(new Setter(GridStackedHeaderCellControl.FontSizeProperty, dataContext.StackedHeaderFontSize));             

 

            Resources[typeof(GridStackedHeaderCellControl)]= stackedHeaderCellStyle; 

Sample Link: https://www.syncfusion.com/downloads/support/forum/119792/ze/CustomizedSample222598489 

We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S