Skip to main content

Conditional Formats

  • 6 minutes to read

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

ConditionalFormats

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.

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

var profitFormatCondition = new TopBottomRuleFormatCondition() {
   Rule = TopBottomRule.TopItems,
   Threshold = 20,    
   FieldName = "Profit", 
   Format = new Format() {
      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.

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

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;

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.

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

var profitFormatCondition = new FormatCondition() {
   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.

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

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

Transition Animation

The GridControl allows applying conditional formatting with an animation effect.

CFAnimation

Run Demo: Data Update Animation

You can enable animation effects as follows:

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.

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

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

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:

See Also