How to apply RowStyle in SfDataGrid?
SfDataGrid allows you to apply style for the GridCells by using the GridColumn.CellStyle property. To apply RowStyle for a particular row/rows, you need to apply the same CellStyle for all the GridColumns in the row.
The following code example illustrates how to apply RowStyle for every 3rd row in the SfDataGrid.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sfgrid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
xmlns:local ="clr-namespace:RowStyle;assembly=RowStyle"
x:Class="RowStyle.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<local:Converter x:Key="colorConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<sfgrid:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding Info}">
<sfgrid:SfDataGrid.Columns x:TypeArguments="sfgrid:Columns">
<sfgrid:GridTextColumn MappingName="ID">
<sfgrid:GridTextColumn.CellStyle>
<Style TargetType="sfgrid:GridCell">
<Setter Property="BackgroundColor"
Value="{Binding ID, Converter={StaticResource colorConverter}}" />
</Style>
</sfgrid:GridTextColumn.CellStyle>
</sfgrid:GridTextColumn>
<sfgrid:GridTextColumn MappingName="Name">
<sfgrid:GridTextColumn.CellStyle>
<Style TargetType="sfgrid:GridCell">
<Setter Property="BackgroundColor"
Value="{Binding ID, Converter={StaticResource colorConverter}}" />
</Style>
</sfgrid:GridTextColumn.CellStyle>
</sfgrid:GridTextColumn>
<sfgrid:GridTextColumn MappingName="Percentage">
<sfgrid:GridTextColumn.CellStyle>
<Style TargetType="sfgrid:GridCell">
<Setter Property="BackgroundColor"
Value="{Binding ID, Converter={StaticResource colorConverter}}" />
</Style>
</sfgrid:GridTextColumn.CellStyle>
</sfgrid:GridTextColumn>
<sfgrid:GridTextColumn MappingName="Result">
<sfgrid:GridTextColumn.CellStyle>
<Style TargetType="sfgrid:GridCell">
<Setter Property="BackgroundColor"
Value="{Binding ID, Converter={StaticResource colorConverter}}" />
</Style>
</sfgrid:GridTextColumn.CellStyle>
</sfgrid:GridTextColumn>
</sfgrid:SfDataGrid.Columns>
</sfgrid:SfDataGrid>
</ContentPage>
Note that the BackgroundColor property for all the GridCells is binded with the same property “ID” to achieve the row style.
Refer the following code example for applying background color using converter.
public Class Converter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int _value = (int)value;
if (_value % 2 == 0)
return Color.Yellow;
return Color.Transparent;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
The following screenshot shows the final outcome upon execution of the above code
The working sample for this KB can be downloaded from the following link
http://www.syncfusion.com/downloads/support/directtrac/general/ze/RowStyle-1514358486
