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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119792 Jul 31,2015 12:14 PM May 4,2017 08:33 AM WPF 7
loading
Tags: SfDataGrid
Anas El Hallabi
Asked On July 31, 2015 12:14 PM

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 [Syncfusion]
Replied On August 3, 2015 06:18 AM

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
Replied On August 3, 2015 10:10 AM

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 [Syncfusion]
Replied On August 4, 2015 02:29 AM

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
Replied On August 6, 2015 11:59 AM

Hello Akila R.

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

Anas

Akila Rajaram [Syncfusion]
Replied On August 6, 2015 11:50 PM

Hi Anas,

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

Regards,
Akila R.

Amir Oveisi
Replied On May 3, 2017 11:44 AM

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 [Syncfusion]
Replied On May 4, 2017 08:33 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;