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.
|
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 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 <syncfusion:GridTextColumn MappingName="Column1">
<syncfusion:GridTextColumn.CellStyle>
<Style TargetType="syncfusion:GridCell">
<Setter Property="Background" Value="{Binding Column1, Converter = {StaticResource NameToColorConvertor}}" />
</Style>
</syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>
C# public class NameToColor : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string input = value as string;
switch (input)
{
case "Yellow": return new SolidColorBrush(Colors.Yellow);
case "Green": return new SolidColorBrush(Colors.Green);
case "Red": return new SolidColorBrush(Colors.Red);
case "Cyan": return new SolidColorBrush(Colors.Cyan);
default: return DependencyProperty.UnsetValue;
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Note: Using convertors in CellStyle is applicable only for WPF and Silverlight.
The following screenshot displays the result of the above code in SfDataGrid.
Sample Links: 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 <syncfusion:GridTextColumn MappingName="Column4" >
<syncfusion:GridTextColumn.CellStyle>
<Style TargetType="syncfusion:GridCell">
<Style.Triggers>
<!--Background property set based on cell content-->
<DataTrigger Binding="{Binding Path=Column4}" Value="Red">
<Setter Property="Background" Value="Red" />
</DataTrigger>
<!--Background property set based on multiple conditions-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Column4}" Value="Yellow" />
<Condition Binding="{Binding Path=Column3}" Value="Cyan" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="Yellow" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</syncfusion:GridTextColumn.CellStyle>
</syncfusion:GridTextColumn>
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.
Sample Link:
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 <Application.Resources>
<local:SelectorClass x:Key="selectclass"/>
<Style x:Key="YellowCellStyle" TargetType="syncfusion:GridCell">
<Setter Property="Background" Value="Yellow" />
</Style>
<Style x:Key="GreenCellStyle" TargetType="syncfusion:GridCell">
<Setter Property="Background" Value="Green" />
</Style>
<Style x:Key="RedCellStyle" TargetType="syncfusion:GridCell">
<Setter Property="Background" Value="Red" />
</Style>
<Style x:Key="CyanCellStyle" TargetType="syncfusion:GridCell">
<Setter Property="Background" Value="Cyan" />
</Style>
<Style x:Key="DefaultCellStyle" TargetType="syncfusion:GridCell">
<Setter Property="Background" Value="White" />
</Style>
</Application.Resources>
<syncfusion:GridTextColumn MappingName="Column3" CellStyleSelector="{StaticResource selectclass}" />
C# public class SelectorClass : StyleSelector
{
public override Style SelectStyle(object item, DependencyObject container)
{
var data = item as MyClass;
if (data != null)
{
if (data.Column3 == "Yellow" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
return App.Current.Resources["YellowCellStyle"] as Style;
else if (data.Column3 == "Green" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
return App.Current.Resources["GreenCellStyle"] as Style;
else if (data.Column3 == "Red" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
return App.Current.Resources["RedCellStyle"] as Style;
else if(data.Column3 == "Cyan" && ((container as GridCell).ColumnBase.GridColumn.MappingName == "Column3"))
return App.Current.Resources["CyanCellStyle"] as Style;
else
return App.Current.Resources["DefaultCellStyle"] as Style;
}
return base.SelectStyle(item, container);
}
}
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.
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.
Sample Links:
|
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
