Skip to main content
All docs
V22.1

How to Conditionally Set Background and Foreground for Grid Rows and Cells

  • 3 minutes to read

This topic describes how to highlight grid rows and cells based on a certain criteria.

Highlight Cells/Rows if Column Values Match a Specific Condition

The Conditional Formatting supports the Criteria Language Syntax. Use a column’s FieldName to access bound and unbound column values.

<dxg:TableView.FormatConditions>
    <!--highlight the Value column if Value is less than 20-->
    <dxg:FormatCondition Expression="Value &lt; 20" FieldName="Value">
        <dx:Format Background="Orange" />
    </dxg:FormatCondition>
    <!--highlight a row if Value is less than 10-->
    <dxg:FormatCondition Expression="[Value] &lt; 10">
        <dx:Format Background="Red" />
    </dxg:FormatCondition>
</dxg:TableView.FormatConditions>

The Conditional Formatting has the following advantages over ColumnBase.CellStyle, DataViewBase.CellStyle, and TableView.RowStyle:

  • Better performance;
  • You do not need to override styles and define triggers, which improves the readability of XAML code;
  • The Criteria Language Syntax supports a large number of functions;
  • Users can customize formatting rules at runtime.

Limitations:

  • The Criteria Language Syntax cannot access ViewModel properties. You can only apply Expressions to column values;
  • You cannot highlight a cell using a Color or Brush stored at the data source level.

Highlight Cells With Colors/Brushes Stored as Column Values

Use the ColumnBase.CellStyle or DataViewBase.CellStyle property.

Cell elements contain EditGridCellData objects in their DataContext.

Use the following binding paths to access cell values, columns, and ViewModel properties:

  • Value - access the current cell value;
  • Column - access the current column;
  • RowData.Row.[YourPropertyName] - access a property of an object from the ItemsSource collection;
  • Data.[FieldName] - access column values in Server Mode, access unbound column values;
  • View.DataContext.[YourPropertyName] - access a property in a grid’s ViewModel.
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
...
<dxg:TableView.CellStyle>
    <Style TargetType="dxg:LightweightCellEditor">
        <Style.Triggers>
            <Trigger Property="SelectionState" Value="None">
                <Setter Property="Background" Value="{Binding RowData.Row.Color, Converter={dxmvvm:ColorToBrushConverter}}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</dxg:TableView.CellStyle>

Highlight Rows with Colors/Brushes Stored as Column Values

You can use the TableView.RowStyle or TreeListView.RowStyle property to highlight rows.

Row elements contain RowData objects in their DataContext.

Use the following binding paths to access cell values and ViewModel properties:

  • Row.[YourPropertyName] - access a property of an object in the ItemsSource collection;
  • DataContext.[FieldName] - access a column value;
  • View.DataContext.[YourPropertyName] - access a property in a grid’s ViewModel.

Note

The complete sample project is available in the following repository: https://github.com/DevExpress-Examples/how-to-build-binding-paths-in-gridcontrol-rows.

xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
...
<dxg:TableView.RowStyle>
    <Style TargetType="dxg:RowControl">
        <Style.Triggers>
            <Trigger Property="SelectionState" Value="None">
                <Setter Property="Background" Value="{Binding Row.Color, Converter={dxmvvm:ColorToBrushConverter}}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</dxg:TableView.RowStyle>

Customize Focused/Selected Cells

Use the CustomCellAppearance event to apply a color to selected/focused cells based on a condition. In this event handler, you can override the default selection color or combine it with the formatted color.

Use the CustomCellAppearance event to highlight a cell based on its value. You cannot highlight a cell based on other column values.

For more information about this event, refer to Formatting Focused Cells and Rows.

Customize Focused/Selected Rows

Use CustomRowAppearance event to apply a color to selected/focused rows based on a condition. In this event handler, you can override the default selection color or blend it with the formatted color.

For more information about this event, refer to Formatting Focused Cells and Rows.

Summary

Cell Formatting Tasks

Conditional Formatting

CellStyle/CellTemplate

CustomCellAppearance

Highlight a cell if a column value matches a certain condition

yes (recommended)

yes

no

Use a Color/Brush stored in ItemsSource entries to highlight a cell

no

yes

no

Customize a focused/selected cell

no

yes

yes

Preserve formatting for regular export

yes

yes ( PrintCellStyle )

no

Preserve formatting for data-aware export

yes

no

no

Row Formatting Tasks

Conditional Formatting

RowStyle

CustomRowAppearance

Highlight a row if a column value matches a certain condition

yes (recommended)

yes

no

Use a Color/Brush stored in ItemsSource entries to highlight a row

no

yes

no

Customize a focused/selected row

no

yes

yes

Preserve formatting for regular and data-aware export

yes

no

no