Conditional Styles in Xamarin DataGrid (SfDataGrid)

15 Jan 202413 minutes to read

The SfDataGrid allows to customize the style of the individual cells and rows based on the requirements. It can be customized in the following ways:

Using Column CellStyle
Using QueryCellStyle Event
Using QueryRowStyle Event

Styling cells using column CellStyle

The SfDataGrid allows to apply cell style for a GridColumn which is used to render the cells in that column. While applying cell style, the GridCell appears in the custom style should be the default one. To apply cell style for a GridColumn using the CellStyle, follow the code example:

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding OrdersInfo}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="Freight" Format="C">
            <syncfusion:GridTextColumn.CellStyle>
                <Style TargetType="syncfusion:GridCell">
                    <Setter Property="Foreground" Value="Red" />
                </Style>
            </syncfusion:GridTextColumn.CellStyle>
        </syncfusion:GridTextColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

Styling cells using converter

The SfDataGrid also allows to apply styles for the GridCell in a column based on conditions by writing a converter for the property in a GridCell for which conditional styles should be applied.

To apply conditional styling for a column by writing converter, follow the code example:

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
             xmlns:local ="clr-namespace:DataGridSample;assembly=DataGridSample"
             x:Class="DataGridSample.Sample">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:CellStyleConverter x:Key="cellStyleConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.BindingContext>
        <local:ViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <syncfusion:SfDataGrid x:Name="dataGrid"
                           ItemsSource="{Binding OrdersInfo}">
        <syncfusion:SfDataGrid.Columns>
            <syncfusion:GridTextColumn MappingName="Freight" Format="C">
                <syncfusion:GridTextColumn.CellStyle>
                    <Style TargetType="syncfusion:GridCell">
                        <Setter Property="BackgroundColor" 
                                Value="{Binding Freight, 
                                       Converter={StaticResource cellStyleConverter}}" />
                        <Setter Property="Foreground" Value="Red" />
                    </Style>
                </syncfusion:GridTextColumn.CellStyle>
            </syncfusion:GridTextColumn>
        </syncfusion:SfDataGrid.Columns>
    </syncfusion:SfDataGrid>
</ContentPage>

public class CellStyleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (System.Convert.ToDouble(value) < 300)
            return Color.White;
        return Color.Green;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

DataGrid with conditional styling

Styling cells using QueryCellStyle event

The conditional style can be applied for any cell using the QueryCellStyle event based on any condition. This event will be fired for each cell. It provides the following properties through the QueryCellStyleEventArgs in its EventHandler:

RowIndex: Provides the row index of current cell in iteration.
ColumnIndex: Provides the column index of current cell in iteration.
CellValue: Provides the cell value of current cell in iteration.
Column: Provides the GridColumn which belongs to current cell in iteration.
e.Handled: Should set to true to apply the changes.
Style: Sets style such as ForegroundColor, BackgroundColor, Font, FontAttribute, FontSize, BorderColor and BorderThickness to the current cell in iteration.

this.dataGrid.QueryCellStyle += DataGrid_QueryCellStyle;
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
    if (e.ColumnIndex == 0 && e.RowIndex % 3 == 1)
    {
        e.Style.BackgroundColor = Color.BlueViolet;
        e.Style.ForegroundColor = Color.White;

    }
    else if (e.Column.MappingName == "FirstName")
    {
        e.Style.BackgroundColor = Color.CornflowerBlue;
        e.Style.ForegroundColor = Color.White;
    }
    else if (e.ColumnIndex == 1 && e.RowIndex % 4 == 0)
    {
        e.Style.BackgroundColor = Color.YellowGreen;
        e.Style.ForegroundColor = Color.White;
    }
    else if (e.ColumnIndex == 3 && e.RowIndex % 6 == 1)
    {
        e.Style.BackgroundColor = Color.PaleVioletRed;
        e.Style.ForegroundColor = Color.White;
    }
    e.Handled = true;
}

DataGrid with conditional styling using QueryCellStyle event

How to style a particular column

Based on the properties of the Column provided in the QueryCellStyleEventArgs of the QueryCellStyle event, style can be applied to a particular column.

private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
    if (e.Column.MappingName == "FirstName")
    {
        e.Style.BackgroundColor = Color.CornflowerBlue;
        e.Style.ForegroundColor = Color.White;
    }
    e.Handled = true;
}

DataGrid with styling a particular column

How to style a particular cell based on RowIndex and ColumnIndex

Styling can be applied to a particular cell based on the RowIndex and ColumnIndex properties in QueryCellStyleEventArgs of the QueryCellStyle event.

private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
    if (e.ColumnIndex == 0 && e.RowIndex == 1)
    {
        e.Style.BackgroundColor = Color.BlueViolet;
        e.Style.ForegroundColor = Color.White;
    }
    e.Handled = true;
}

Styling specific cells in a DataGrid based on conditions

How to style a particular cell based on CellValue

Styling can be applied to a particular cell based on CellValue property in QueryCellStyleEventArgs of the QueryCellStyle event.

private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
    if (e.ColumnIndex == 1 && e.CellValue.ToString() == "4")
    {
        e.Style.BackgroundColor = Color.YellowGreen;
        e.Style.ForegroundColor = Color.White;
    }
    e.Handled = true;
}

Stlying specific cells in a DataGrid based on its value

Styling cells using RowStyle event

The Conditional style can be applied for an entire row based on any condition using the QueryRowStyle event. This event will be fired for each row. It provides the following properties through the QueryRowStyleEventArgs in its EventHandler:

RowData: Provides the row data of current row in iteration.
RowIndex: Provides the row index of current row in iteration.
e.Handled: Should set to true to apply the changes.
Style: Sets style such as ForegroundColor, BackgroundColor, Font, FontAttribute and FontSize to the current row in iteration.

this.dataGrid.QueryRowStyle += DataGrid_QueryRowStyle;
private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
    if (e.RowIndex == 3)
    {
        e.Style.ForegroundColor = Color.White;
        e.Style.BackgroundColor = Color.BlueViolet;
        e.Style.Font = "Samantha.ttf";
        e.Style.FontSize = 20;
    }
    else if (e.RowData  == viewModel.OrdersInfo[7])
    {
        e.Style.ForegroundColor = Color.White;
        e.Style.BackgroundColor = Color.PaleVioletRed;
    }
    e.Handled = true;
}

DataGrid with styling rows based on condition

How to style a particular row based on RowIndex

Styling can be applied to a particular row based on RowIndex property in QueryRowStyleEventArgs of the QueryRowStyle event.

private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
    if (e.RowIndex == 3)
    {
        e.Style.ForegroundColor = Color.White;
        e.Style.BackgroundColor = Color.PaleVioletRed;
    }
    e.Handled = true;
}

Styling certain rows in a DataGrid based on condition

How to style a particular row based on RowData

Styling can be applied to a particular row based on RowData property in QueryRowStyleEventArgs of the QueryRowStyle event.

private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
    if (e.RowData == viewModel.OrdersInfo[5])
    {
        e.Style.ForegroundColor = Color.White;
        e.Style.BackgroundColor = Color.BlueViolet;
    }
    e.Handled = true;
}

Styling certain rows in a DataGrid based on its data

NOTE

By default, only the selected background color will be applied for the selected row even if row style is applied for that row. If you want to apply selection color over while selecting row style, set the ConditionalStylingPreference property to StylePreference.RowStyleAndSelection.

private void DataGrid_QueryRowStyle(object sender, QueryRowStyleEventArgs e)
{
    if (e.RowIndex == 3 || e.RowIndex == 7)
    {
        e.Style.ForegroundColor = Color.White;
        e.Style.BackgroundColor = Color.PaleVioletRed;
    }
    //Set the below code to display only selection
    //e.Style.ConditionalStylingPreference = StylePreference.Selection;
    e.Style.ConditionalStylingPreference = StylePreference.RowStyleAndSelection;
    e.Handled = true;
}

DataGrid with selection and styling applied together

NOTE

You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.