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.

Using GridColumn.CellStyle property

Using Style.Triggers

Using GridColumn.CellStyleSelector property

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:\Users\labuser\Desktop\note.jpg$ Note: 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.jpg$ Note: 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

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:\Users\labuser\Desktop\note.jpg$ Note: 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.jpg$ Note: 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.