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

1. Create an enumeration that lists comparison rules you want to use in conditional formatting rules:

   C#

   public enum ConditionRule { Less, Greater }
   

   VB.NET

   Public Enum ConditionRule
       Less
       Greater
   End Enum
   

2. Create a class that describes a conditional formatting rule:

   C#

   public class FormattingRule : BindableBase {
       public FormattingRule(string fieldname, ConditionRule valuerule, int value, bool applytorow) {
           FieldName = fieldname;
           ValueRule = valuerule;
           Value = value;
           ApplyToRow = applytorow;
       }
       public string FieldName { get; }
       public ConditionRule ValueRule { get; }
       public int Value { get; }
       public bool ApplyToRow { get; }
   }
   

   VB.NET

   Public Class FormattingRule
       Inherits BindableBase
   
       Public Sub New(ByVal fieldname As String, ByVal valuerule As ConditionRule, ByVal value As Integer, ByVal applytorow As Boolean)
           FieldName = fieldname
           ValueRule = valuerule
           Value = value
           ApplyToRow = applytorow
       End Sub
   
       Public ReadOnly Property FieldName As String
       Public ReadOnly Property ValueRule As ConditionRule
       Public ReadOnly Property Value As Integer
       Public ReadOnly Property ApplyToRow As Boolean
   End Class
   

3. Specify a collection of conditional formatting rules in the ViewModel:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           Rules = new ObservableCollection<FormattingRule>() {
               new FormattingRule("Total", ConditionRule.Less, 0, true)
           };
       }
       // ...
       public ObservableCollection<FormattingRule> Rules { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           ' ...
           Rules = New ObservableCollection(Of FormattingRule)() From {
               New FormattingRule("Total", ConditionRule.Less, 0, True)
           }
       End Sub
   
       ' ...
       Public ReadOnly Property Rules As ObservableCollection(Of FormattingRule)
   End Class
   

   If you want the GridControl to reflect changes made in the Rules collection, this collection should implement the INotifyCollectionChanged interface.

Create a Format Condition Template

1. 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:

   XAML

   <Window ...
       xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm">
       <Window.Resources>
           <dxmvvm:ObjectToObjectConverter x:Key="FormatRuleConverter">
               <dxmvvm:MapItem Source="Less" Target="Less"/>
               <dxmvvm:MapItem Source="Greater" Target="Greater"/>
           </dxmvvm:ObjectToObjectConverter>
       </Window.Resources>
   

2. Create a template that generates conditional formatting rules.

   Use the FormatRuleConverter to specify the Converter parameter for the FormatCondition.ValueRule property.

   Use the DependencyObjectExtensions.DataContext attached property when you bind the GridControl to conditional formatting properties. This attached property synchronizes data updates of bound properties to enhance grid performance:

   XAML

   <Window.Resources>
       <DataTemplate x:Key="BackgroundTemplate">
           <ContentControl>
               <dxg:FormatCondition 
                   FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                   ValueRule="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ValueRule, RelativeSource={RelativeSource Self}, Converter={StaticResource FormatRuleConverter}}"
                   Value1="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Value, RelativeSource={RelativeSource Self}}"
                   ApplyToRow="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ApplyToRow, RelativeSource={RelativeSource Self}}"
                   PredefinedFormatName="LightRedFill"/>
           </ContentControl>
       </DataTemplate>
   </Window.Resources>
   

Apply Format Conditions to the GridControl

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

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.

1. Specify an enumeration that lists format condition types:

   C#

   public enum FormattingType { Background, Font, Icon }
   

   VB.NET

   Public Enum FormattingType
       Background
       Font
       Icon
   End Enum
   

2. Add a property that returns a format condition type to the Rule class:

   C#

   public class FormattingRule : BindableBase {
       public FormattingRule(string fieldname, ConditionRule valuerule, int value, bool applytorow, FormattingType type) {
           FieldName = fieldname;
           ValueRule = valuerule;
           Value = value;
           ApplyToRow = applytorow;
           Type = type;
       }
       public string FieldName { get; }
       public ConditionRule ValueRule { get; }
       public int Value { get; }
       public bool ApplyToRow { get; }
       public FormattingType Type { get; }
   }
   

   VB.NET

   Public Class FormattingRule
       Inherits BindableBase
   
       Public Sub New(ByVal fieldname As String, ByVal valuerule As ConditionRule, ByVal value As Integer, ByVal applytorow As Boolean, ByVal type As FormattingType)
           FieldName = fieldname
           ValueRule = valuerule
           Value = value
           ApplyToRow = applytorow
           Type = type
       End Sub
   
       Public ReadOnly Property FieldName As String
       Public ReadOnly Property ValueRule As ConditionRule
       Public ReadOnly Property Value As Integer
       Public ReadOnly Property ApplyToRow As Boolean
       Public ReadOnly Property Type As FormattingType
   End Class
   

3. Add conditional formatting rules to the Rules collection:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           Rules = new ObservableCollection<FormattingRule>() {
               new FormattingRule("Total", ConditionRule.Less, 0, true, FormattingType.Background),
               new FormattingRule( nameof(Order.Discount), ConditionRule.Greater, 0, false, FormattingType.Font),
               new FormattingRule( nameof(Order.Discount), ConditionRule.Greater, 0, false, FormattingType.Icon)
           };
       }
       // ...
       public ObservableCollection<FormattingRule> Rules { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           ' ...
           Rules = New ObservableCollection(Of FormattingRule)() From {
               New FormattingRule("Total", ConditionRule.Less, 0, True, FormattingType.Background),
               New FormattingRule(NameOf(Order.Discount), ConditionRule.Greater, 0, False, FormattingType.Font),
               New FormattingRule(NameOf(Order.Discount), ConditionRule.Greater, 0, False, FormattingType.Icon)
           }
       End Sub
   
       ' ...
       Public ReadOnly Property Rules As ObservableCollection(Of FormattingRule)
   End Class
   

4. Create templates that generate conditional formatting rules:

   XAML

   <Window ...
       xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
       xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
       <Window.Resources>
           <!-- ... -->
           <DataTemplate x:Key="FontTemplate">
               <ContentControl>
                   <dxg:FormatCondition 
                       FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                       ValueRule="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ValueRule, RelativeSource={RelativeSource Self}, Converter={StaticResource FormatRuleConverter}}"
                       Value1="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Value, RelativeSource={RelativeSource Self}}"
                       ApplyToRow="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ApplyToRow, RelativeSource={RelativeSource Self}}"
                       PredefinedFormatName="BoldText"/>
               </ContentControl>
           </DataTemplate>
   
           <DataTemplate x:Key="IconTemplate">
               <ContentControl>
                   <dxg:FormatCondition 
                       FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                       ValueRule="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ValueRule, RelativeSource={RelativeSource Self}, Converter={StaticResource FormatRuleConverter}}"
                       Value1="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Value, RelativeSource={RelativeSource Self}}"
                       ApplyToRow="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ApplyToRow, RelativeSource={RelativeSource Self}}">
                       <dxg:FormatCondition.Format>
                           <dx:Format Icon="{dx:IconSet Name=Stars3_1}"/>
                       </dxg:FormatCondition.Format>
                   </dxg:FormatCondition>
               </ContentControl>
           </DataTemplate>
       </Window.Resources>
   

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#

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;
    }
}

VB.NET

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

<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>