How to: Bind the Grid to a Collection of Conditional Formatting Rules

Nov 29, 2023
6 minutes to read

This topic describes how to define conditional formatting rules in a View Model and apply them to the GridControl.

View Example: How to Bind the GridControl to Conditional Formatting Rules Specified in a ViewModel

Apply Conditional Formatting Rules specified in a ViewModel to the GridControl

This example creates a conditional formatting rule that highlights rows.

Specify Format Conditions in the ViewModel

Create an enumeration that lists comparison rules you want to use in conditional formatting rules:
Create a class that describes a conditional formatting rule:
Specify a collection of conditional formatting rules in the ViewModel:

Create a Format Condition Template

To specify a rule’s comparison operator, set the FormatCondition.ValueRule property to a ConditionRule enumeration value. Create an ObjectToObjectConverter to map your ConditionRule enumeration values to the ConditionRule enumeration values:
Create a template that generates conditional formatting rules.

Apply Format Conditions to the GridControl

Assign the conditional formatting rule collection to the TableView.FormatConditionsSource property.
Set the TableView.FormatConditionGeneratorTemplate property to a template that generates conditional formatting rules.

XAML

xaml

<dxg:GridControl ItemsSource="{Binding Orders}">
    <!-- ... -->
    <dxg:GridControl.View>
        <dxg:TableView FormatConditionsSource="{Binding Rules}"
                       FormatConditionGeneratorTemplate="{StaticResource BackgroundFormat}"/>
    </dxg:GridControl.View>
</dxg:GridControl>

Add Multiple Conditional Formatting Rules

If you want to specify extra format conditions, follow the steps below. This example demonstrates how to add format conditions that change a cell’s font and display an image in this cell.

Specify an enumeration that lists format condition types:
Add a property that returns a format condition type to the Rule class:
Add conditional formatting rules to the Rules collection:
Create templates that generate conditional formatting rules:

Add a Template Selector to Choose among Multiple Templates

Your application now contains the BackgroundTemplate , FontTemplate , and IconTemplate. To choose a template based on the format condition type, create a template selector and assign it to the TableView.FormatConditionGeneratorTemplateSelector property:

C#
VB.NET

csharp

public class FormatConditionSelector : DataTemplateSelector {

    public DataTemplate BackgroundTemplate { get; set; }
    public DataTemplate FontTemplate { get; set; }
    public DataTemplate IconTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
        FormattingRule rule = item as FormattingRule;
        if(rule == null) return null;
        switch(rule.Type) {
            case FormattingType.Font:
                return FontTemplate;
            case FormattingType.Background:
                return BackgroundTemplate;
            case FormattingType.Icon:
                return IconTemplate;
        }
        return null;
    }
}

Public Class FormatConditionSelector
    Inherits DataTemplateSelector

    Public Property BackgroundTemplate As DataTemplate
    Public Property FontTemplate As DataTemplate
    Public Property IconTemplate As DataTemplate

    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
        Dim rule As FormattingRule = TryCast(item, FormattingRule)
        If rule Is Nothing Then Return Nothing

        Select Case rule.Type
            Case FormattingType.Font
                Return FontTemplate
            Case FormattingType.Background
                Return BackgroundTemplate
            Case FormattingType.Icon
                Return IconTemplate
        End Select

        Return Nothing
    End Function
End Class

XAML

xaml

<Window.Resources>
    <!-- ... -->
    <local:FormatConditionSelector x:Key="FormatConditionSelector" 
                                   BackgroundTemplate="{StaticResource BackgroundTemplate}" 
                                   FontTemplate="{StaticResource FontTemplate}" 
                                   IconTemplate="{StaticResource IconTemplate}"/>
</Window.Resources>
<dxg:GridControl ItemsSource="{Binding Orders}">
    <!-- ... -->
    <dxg:GridControl.View>
        <dxg:TableView FormatConditionsSource="{Binding Rules}"
                       FormatConditionGeneratorTemplateSelector="{StaticResource FormatConditionSelector}"/>
    </dxg:GridControl.View>
</dxg:GridControl>