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.
Syncfusion Feedback

How to set background color for cells in a column based on the cell content?

SfDataGrid displays all the column values in cells. SfDataGrid control allows you to apply style for these cells in a particular column in two ways.

  1. Using GridColumn.CellStyle property
  • Using Style.Triggers
  1. Using GridColumn.CellStyleSelector property
  1. Using GridColumn.CellStyle property

Using this property you can customize the background of the cells in a particular column based on its cell content with the help of a Converter or by using Style.Triggers.

The following code example explains how to apply background for cells in a particular column based on its cell content using GridColumn.CellStyle property with the help of a converter. Here in the NameToColor converter class, the value produced by the binding source for each cell is available in the value parameter of the Convert method and the target property for which the style is to be set is obtained from the targetType parameter. Using the value parameter, you can return a converted value to the target property based on which the background is changed.

XAML

 

C#

 

C:\Users\labuser\Desktop\note.jpgNote: Using convertors in CellStyle is applicable only for WPF and Silverlight.

The following screenshot displays the result of the above code in SfDataGrid.

D:\Syncfusion\Issues\2014 Volume 2\KB Issues\KB Images\Background_CellContent1.png

Sample Links:

WPF

SilverLight

Using Style.Triggers

You can also use DataTriggers to set the background of a cell based on its content. They apply property values or perform actions when the bound data meets a specified condition. It is not necessary to write a converter when you use DataTriggers that reduces the code size. You can use MultiDataTriggers for specifying a set of conditions that is satisfied and applies the property values or performs actions. The following code example explains the usage of DataTriggers to set the background of a cell based on its cell content.

XAML

 

C:\Users\labuser\Desktop\note.jpgNote: Applicable only for WPF as DataTriggers is not available in WinRT and Silverlight.

Here in the above code background is applied only for Column4, when the cell content is Red, the background is changed as Red using the DataTriggers. On the other hand using MultiDataTriggers, a set of conditions are given, i.e. when the value in Column4 is Yellow and value in Column3 is Cyan, then only the Background of the cell containing the text Yellow will be changed to yellow. In other cases, default background is displayed.

The following screenshot displays the result of the above code in SfDataGrid.

D:\Syncfusion\Issues\2014 Volume 2\KB Issues\KB Images\Background_CellContent3.png

Sample Link:

WPF

  1. Using CellStyleSelector property

You can customize the background of the cells in a particular column based on its cell content using the CellStyleSelector property. This property is used to apply style for a cell and to change the background of the GridCell. CellStyle gives you better performance when compared to CellStyleSelector.

The following code example explains how to apply the background for the cells in a particular column using CellStyleSelector.

XAML

C#

 

C:\Users\labuser\Desktop\note.jpgNote: For WinRT, write the above code in SelectStyleCore method as SelectStyle is not a virtual method in WinRT.

 

The following screenshot displays the result of the above code in SfDataGrid.

D:\Syncfusion\Issues\2014 Volume 2\KB Issues\KB Images\Background_CellContent2.png

C:\Users\labuser\Desktop\note.jpgNote: DataTriggers and StyleSelector is not available in Silverlight, hence changing background of a cell based on its content using Style.Triggers and CellStyleSelector is not applicable for Silverlight.

Sample Links:

WPF

WinRT

UWP

 

Article ID: Published Date: Last Revised Date: Platform: Control: .NET Framework:
2600 09/10/2014 01/22/2016 WPF SfDataGrid 4.5
Did you find this information helpful?
Comments
Ryan Nebel Nov 02, 2015
I am using the newest version of the Syncfusion controls and i am having trouble getting the cell style to work. This was working in the previous version. here is my XAML; And the Error; Additional information: 'GridCell' TargetType does not match type of element 'GridCell'. Thank You! Ryan N.
Reply
Carlos Fernando Consigli Jan 17, 2016
In the supplied WPF sample (BackGroundCell_Style_SelectorDemo.zip) the color does not change when you edit the cells. Is that behaviour expected?
Reply
Sowndaiyan Paulpandi [Syncfusion] Jan 19, 2016
Hi Fernando, In this KB we have set the background color for GridCell based upon the cell content. If you want to apply style at run time, you need to invoke the SfDataGrid.UpdateDataRow method which is an extension method and it is available in the below namespace. Code Example [C#] using Syncfusion.UI.Xaml.Grid.Helpers; You can refer the below sample to change the cell style at run time, Sample : http://www.syncfusion.com/downloads/support/forum/121696/ze/BackGroundCell_Style_SelectorDemo853694864 Regards, Sowndaiyan
Andy Link Oct 04, 2017

I try this example in Xamarin, but I have the error: Can't resolve background on GridCell.

Regards

Reply
Ashok N [Syncfusion] Oct 09, 2017

Hi Andy,

 

Thanks for using Xamarin.Forms controls.

 

You can set the GridCell style based on the content using the below KB link in Xamarin.Forms.

 

https://www.syncfusion.com/kb/6061/how-to-customize-the-foreground-color-for-cells-in-a-column-based-on-the-cell-content

 

https://www.syncfusion.com/kb/7126/how-to-customize-the-foreground-color-for-cells-in-a-column-based-on-the-cell-content-from-code

 

Regards,

Ashok

Add Comment
You must log in to leave a comment

Warning Icon 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.Close Icon