We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.

9 Replies

AR Akila Rajaram Syncfusion Team August 3, 2015 10:18 AM UTC

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.


AE Anas El Hallabi August 3, 2015 02:10 PM UTC

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


AR Akila Rajaram Syncfusion Team August 4, 2015 06:29 AM UTC

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.


AE Anas El Hallabi August 6, 2015 03:59 PM UTC

Hello Akila R.

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

Anas


AR Akila Rajaram Syncfusion Team August 7, 2015 03:50 AM UTC

Hi Anas,

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

Regards,
Akila R.


AO Amir Oveisi May 3, 2017 03:44 PM UTC

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?


MK Muthukumar Kalyanasundaram Syncfusion Team May 4, 2017 12:33 PM UTC

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.   


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 



HB Harvey Brofman November 20, 2020 06:56 AM UTC

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



VS Vijayarasan Sivanandham Syncfusion Team November 23, 2020 03:06 PM UTC

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; 
We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S 


Loader.
Live Chat Icon For mobile
Up arrow icon