Conditional Formats

Jun 06, 2022
6 minutes to read

Conditional formats (conditional formatting rules) allow you to apply specified formatting only when certain conditions are met.

The image above shows the grid column whose Profit cells are green if their values are greater than 10M, i.e. the conditional format with the following settings is applied:

Format - Green Fill with Dark Green Text
Condition - Profit values are greater than 10M

Conditional Formats Overview

The table below shows the following FormatConditionBase class descendants that represent the conditional formats.

Class

Conditional Formats

| | --- | --- | |

FormatCondition

The Value Based rules format cells comparing cell values with static values.

The Date Occurring rules highlight date-time values that fall into a specified interval.

The Custom Condition uses a custom expression to apply conditional formatting.

| |

UniqueDuplicateRuleFormatCondition

The Unique-Duplicate rules format cells whose values are unique or duplicate.

| |

TopBottomRuleFormatCondition

The Top-Bottom rules highlight a specific number of topmost/bottommost values.

The Average rules format cells whose values are above or below an average value.

| |

DataUpdateFormatCondition

The Data Update rules visualize changing values in real time.

| |

IconSetFormatCondition

The Icon Sets rules use sets of icons to format different ranges of values.

| |

ColorScaleFormatCondition

The Color Scales rules use sets of colors to format different ranges of values.

| |

DataBarFormatCondition

The Data Bars rules visualize values using bars.

Create Conditional Formats

Refer to the Creating Conditional Formatting Rules topic to learn how to create conditional formats.

Bind to a Collection of Conditional Formats

The grid’s view supports binding to a collection of objects containing conditional format settings. This collection of objects can be described in Model or ViewModel.

Specify the TableView.FormatConditionsSource (or TreeListView.FormatConditionsSource) property to assign the source from which the grid generates conditional formats. See the Binding to a Collection of Conditional Formatting Rules topic to learn more.

Specify Formats

Create Custom Formats

Create the required format class instance, specify its settings, and assign the resulting object to the conditional format’s Format property. The table below lists conditional formats with corresponding format classes.

Conditional Format	Format Class	Format Property
Basic conditional formats	Format	ExpressionConditionBase.Format
Data Update	Format	DataUpdateFormatCondition.Format
Icon Sets	IconSetFormat	IconSetFormatCondition.Format
Color Scales	ColorScaleFormat	ColorScaleFormatCondition.Format
Data Bars	DataBarFormat	DataBarFormatCondition.Format

The following code sample illustrates how to create a conditional formatting rule with a custom format in markup.

XAML

xaml

<dxg:TableView.FormatConditions> 
   <dxg:TopBottomRuleFormatCondition Rule="TopItems" Threshold="20" FieldName="Profit">
      <dx:Format Background="Purple"/> 
   </dxg:TopBottomRuleFormatCondition> 
</dxg:TableView.FormatConditions>

The code sample below illustrates how to define the same conditional formatting rule in code-behind.

C#
VB.NET

csharp

var profitFormatCondition = new TopBottomRuleFormatCondition() {
   Rule = TopBottomRule.TopItems,
   Threshold = 20,    
   FieldName = "Profit", 
   Format = new Format() {
      Background = Brushes.Purple
   }
};
view.FormatConditions.Add(profitFormatCondition);

Dim profitFormatCondition = New TopBottomRuleFormatCondition() With {
   .Rule = TopBottomRule.TopItems,
   .Threshold = 20,
   .FieldName = "Profit",
   .Format = new Format() With {
      .Background = Brushes.Purple
   }
}
view.FormatConditions.Add(profitFormatCondition)

Use Predefined Formats

Specify the conditional format’s FormatConditionBase.PredefinedFormatName property.

The table below presents the collections that store predefined formats.

Conditional Format	Predefined Formats Collection
Basic conditional formats	TableView.PredefinedFormats (TreeListView.PredefinedFormats)
Data Update	TableView.PredefinedFormats (TreeListView.PredefinedFormats)
Icon Sets	TableView.PredefinedIconSetFormats (TreeListView.PredefinedIconSetFormats)
Color Scales	TableView.PredefinedColorScaleFormats (TreeListView.PredefinedColorScaleFormats)
Data Bars	TableView.PredefinedDataBarFormats (TreeListView.PredefinedDataBarFormats)

You cannot modify a predefined format collection. To define a new predefined format, create a new predefined format collection.

The following code sample illustrates how to create a collection of predefined formats in markup.

XAML

xaml

<dxg:TableView AllowConditionalFormattingMenu="True">
   <dxg:TableView.PredefinedFormats>
      <dx:FormatInfoCollection>
         <dx:FormatInfo FormatName="PurpleFill" DisplayName="Purple Fill">
            <dx:FormatInfo.Format>
               <dxg:Format Background="Purple"/>
            </dx:FormatInfo.Format>
         </dx:FormatInfo>
      </dx:FormatInfoCollection>
   </dxg:TableView.PredefinedFormats>
   <!----> 
</dxg:TableView>

The code sample below illustrates how to create a collection of predefined formats in code-behind.

C#
VB.NET

csharp

FormatInfoCollection predefinedFormats = new FormatInfoCollection();
foreach (FormatInfo formatInfo in view.PredefinedFormats) {
   predefinedFormats.Add(formatInfo);
}
predefinedFormats.Add(new FormatInfo() {
   FormatName = "PurpleFill",
   DisplayName = "Purple Fill",
   Format = new Format() {
      Background = Brushes.Purple
   }
});
view.PredefinedFormats = predefinedFormats;

Dim predefinedFormats As FormatInfoCollection = New FormatInfoCollection()

For Each formatInfo As FormatInfo In view.PredefinedFormats
    predefinedFormats.Add(formatInfo)
Next

Dim newFormatInfo As FormatInfo = New FormatInfo() With {
    .FormatName = "PurpleFill",
    .DisplayName = "Purple Fill",
    .Format = New Format() With {
        .Background = Brushes.Purple
    }
}
predefinedFormats.Add(newFormatInfo)
view.PredefinedFormats = predefinedFormats

Specify Conditions

Use Rules

Choose the required conditional format (see the table in the Conditional Formats Overview section). Depending on the chosen conditional format, specify a rule for the conditional format, if necessary.

The following code sample illustrates how to define a conditional format with rule in markup.

XAML

xaml

<dxg:TableView.FormatConditions>
   <dxg:FormatCondition ValueRule="Greater" Value1="10000000" FieldName="Profit" PredefinedFormatName="LightRedFillWithDarkRedText" />   
</dxg:TableView.FormatConditions>

The code sample below illustrates how to define the same conditional format in code-behind.

C#
VB.NET

csharp

var profitFormatCondition = new FormatCondition() {
   ValueRule = ConditionRule.Greater,
   Value1 = 10000000,
   FieldName = "Profit",
   PredefinedFormatName = "LightRedFillWithDarkRedText"
};
view.FormatConditions.Add(profitFormatCondition);

Dim profitFormatCondition = New FormatCondition() With {
   .ValueRule = ConditionRule.Greater,
   .Value1 = 10000000,
   .FieldName = "Profit",
   .PredefinedFormatName = "LightRedFillWithDarkRedText"
}
view.FormatConditions.Add(profitFormatCondition)

Create Custom Expressions

Specify the conditional format’s FormatConditionBase.Expression property. Refer to the Formatting Values Using Custom Conditions topic to learn more.

The following code sample illustrates how to define a conditional format with an expression in markup.

XAML

xaml

<dxg:TableView.FormatConditions>
   <dxg:FormatCondition Expression="Contains([Symbol], 'AT')" FieldName="Symbol" PredefinedFormatName="LightRedFillWithDarkRedText" />      
</dxg:TableView.FormatConditions>

The code sample below illustrates how to define the same conditional format in code-behind.

C#
VB.NET

csharp

var symbolFormatCondition = new FormatCondition() {
   Expression = "Contains([Symbol], 'AT')",
   FieldName = "Symbol",
   PredefinedFormatName = "LightRedFillWithDarkRedText"
};
view.FormatConditions.Add(symbolFormatCondition);

Dim symbolFormatCondition = New FormatCondition() With {
   .Expression = "Contains([Symbol], 'AT')",
   .FieldName = "Symbol",
   .PredefinedFormatName = "LightRedFillWithDarkRedText"
}
view.FormatConditions.Add(symbolFormatCondition)

Transition Animation

The GridControl allows applying conditional formatting with an animation effect.

Run Demo: Data Update Animation

You can enable animation effects as follows:

Set the ExpressionConditionBase.AnimateTransition (or IndicatorFormatConditionBase.AnimateTransition) property to true. This approach has a higher priority.
Set the TableView.AnimateConditionalFormattingTransition (or TreeListView.AnimateConditionalFormattingTransition) property to true to enable animation effects for all conditional formats within the current grid’s view.

To define specific animation effects for a conditional format, create the ConditionalFormattingAnimationSettings class instance with the required settings and assign the resulting object to the conditional format’s ExpressionConditionBase.AnimationSettings (or IndicatorFormatConditionBase.AnimationSettings) property.

The following code sample illustrates how to define specific animation effects for a conditional format in markup.

XAML

xaml

<dxg:TableView.FormatConditions>
   <dxg:DataBarFormatCondition FieldName="OldPrice" PredefinedFormatName="GreenSolidDataBar">
      <dxg:DataBarFormatCondition.AnimationSettings>
         <dx:ConditionalFormattingAnimationSettings Duration="0:0:6" EasingMode="EaseOut"/>
      </dxg:DataBarFormatCondition.AnimationSettings>
   </dxg:DataBarFormatCondition>
</dxg:TableView.FormatConditions>

The code sample below illustrates how to define the same animation effects for a conditional format in code-behind.

C#
VB.NET

csharp

var oldPriceFormatCondition = new DataBarFormatCondition() {
   FieldName = "OldPrice",
   PredefinedFormatName = "GreenSolidDataBar",
   AnimationSettings = new ConditionalFormattingAnimationSettings() {
      Duration = new Duration(new TimeSpan(0, 0, 6)),
      EasingMode = AnimationEasingMode.EaseOut
   }
};
view.FormatConditions.Add(oldPriceFormatCondition);

Dim oldPriceFormatCondition = New DataBarFormatCondition() With {
   .FieldName = "OldPrice",
   .PredefinedFormatName = "GreenSolidDataBar",
   .AnimationSettings = new ConditionalFormattingAnimationSettings() With {
      .Duration = new Duration(new TimeSpan(0, 0, 6)),
      .EasingMode = AnimationEasingMode.EaseOut
   }
}
view.FormatConditions.Add(oldPriceFormatCondition)

To define the duration of animation effect transition for all conditional formats within the current grid’s view, specify the TableView.ConditionalFormattingTransitionDuration (TreeListView.ConditionalFormattingTransitionDuration) property.

Tip

The Data Update conditional format has specific animation settings. Refer to Data Update Animation section of the Formatting Changing Values topic to learn how specify animation for changing values.

Filter by Conditional Formatting Rules

The GridControl allows you to specify conditional formatting rules and apply filters based on these rules:

Tip

Topic : Conditional Formatting Filters