Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Collapse]Appearance and Conditional Formatting
    [Expand]Look and Feel
    [Expand]Appearances
    [Collapse]Conditional Formats
      Conditional Formatting
      Tutorial: Conditional Formatting
      How to: Apply a Data Bar Format to a Column
      How to: Apply an Icon Set Format to a Column
      How to: Apply a Two-Color Scale Format to a Column
      How to: Apply a Three-Color Scale Format to a Column
      How to: Highlight Column Values that Match a Condition
      How to: Highlight the Top 20% Column Values
      How to: Apply a Format Based on an Expression
    [Expand]Custom Painting
    [Expand]Alpha Blending and Background Images
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Conditional Formatting

The Data Grid control includes a Microsoft Excel-inspired conditional formatting feature, which allows you to change the appearance of individual cells or rows based on specific conditions. This feature helps to highlight critical information, identify trends and exceptions, and compare data. Formatting rules can be created at design time and runtime.

Note

In server mode, conditional formatting rules that involve multiple cell values are not supported.

Note

When printing the Grid control and exporting it to PDF, HTML, MHT, RTF and XLS(X) formats (in WYSIWYG export mode), conditional formatting using icons and data bars is not printed/exported.

Note

When exporting the Grid control to the old XLS format in data-aware export mode, take note of the following limitations of this format:

- certain formatting icons (e.g., rating stars and up and down arrows) are not supported;

- negative data bars are not supported;

- color scale formatting is performed differently when opening XLS and XLSX files in MS Excel.

To take full advantage of exporting data with conditional formatting applied, export data to XLSX format in data-aware export mode instead of XLS format.

Expanded Online Video

Learn about the features available to end-users, types of formatting rules and how to set up conditional formatting at design time or in code.

Multiple format rules can be applied to a Data Grid's View simultaneously. To add format rules, use the ColumnView.FormatRules collection. Each rule specified by a GridFormatRule class object identifies a target column, the rule type and other options.

The Rule property (FormatRuleBase.Rule) of a GridFormatRule object allows you to specify the rule type. At design time, click the dropdown button for the Rule property to open the dropdown list showing available conditions in a human-readable form.

After choosing the rule type, a corresponding rule class object is created and assigned to the Rule property (when defining a format rule at runtime, create this object and assign it to the Rule property manually).

The following table lists available rule types.

Rule Condition Class Description Format Examples
Format based on value FormatConditionRuleValue Applies a format if a column's value meets a specified condition (Equal, Less, Between, etc.).

You can customize appearance settings for this format rule using the following properties:

Format based on date FormatConditionRuleDateOccuring Applies a format if a column's DateTime value refers to a specific date and/or date interval relative to today. These days and intervals include Today, Yesterday, This week, Earlier this month, Prior to this year, etc.

You can customize appearance settings for this format rule using the following properties:

Format based on user defined expression FormatConditionRuleExpression Applies a format if a cell value(s) meets a specific expression.

You can customize appearance settings for this format rule using the following properties:

Note

Format only top or bottom rank values FormatConditionRuleTopBottom Applies a format if a value is in the range of the highest or lowest column values.

You can customize appearance settings for this format rule using the following properties:

Format only values that are above or below average FormatConditionRuleAboveBelowAverage Applies a format if a cell value is above or below the column's average.

You can customize appearance settings for this format rule using the following properties:

Format only values that contain FormatConditionRuleContains Applies a format if a value matches one of constants.

You can customize appearance settings for this format rule using the following properties:

Format only unique or duplicate values FormatConditionRuleUniqueDuplicate Applies a format if a column's value is unique or a duplicate.

You can customize appearance settings for this format rule using the following properties:

Format using 2 color scales FormatConditionRule2ColorScale Applies a format using a two-color scale to display data distribution and variation.

You can use the FormatConditionRule2ColorScale.PredefinedName property to apply one of the predefined color scales (White - Azure, Yellow - Green, etc.), or use the FormatConditionRule2ColorScale.MinimumColor and FormatConditionRule2ColorScale.MaximumColor properties to provide a custom color scale.
Format using 3 color scales FormatConditionRule3ColorScale Applies a format using a three-color scale to display data distribution and variation.

You can use the FormatConditionRule2ColorScale.PredefinedName property to apply one of the predefined color scales (Blue - White - Red, Green - Yellow - Red, etc.), or use the FormatConditionRule2ColorScale.MinimumColor, FormatConditionRule3ColorScale.MiddleColor and FormatConditionRule2ColorScale.MaximumColor properties to provide a custom color scale.
Format using Data bar FormatConditionRuleDataBar Applies a format using a data bar.

You can use the FormatConditionRuleDataBar.PredefinedName property to apply one of the predefined bars styles (Coral, Blue Gradient, etc.), or use the FormatConditionRuleDataBar.Appearance and FormatConditionRuleDataBar.AppearanceNegative properties to provide a custom data bars appearance.
Format using icons FormatConditionRuleIconSet Applies a format using an icon set.

You can use one of the predefined icon sets (Ratings4, Symbols3Uncircled, etc.) or provide a custom icon set.

You can apply multiple format rules to the same column. The appearances imposed by these rules are combined by default. To prevent formats from being combined, use the FormatRuleBase.StopIfTrue property.

The GridFormatRule.Column property of each rule identifies the column that provides values to test against a formatting rule. By default, the format is applied to the same GridFormatRule.Column. However, you can apply this format to another column by setting the GridFormatRule.ColumnApplyTo property. In addition, you can apply the format to the entire row by setting the GridFormatRule.ApplyToRow property to true.

Expanded Applying Format Rules by End-Users at Runtime

If the GridOptionsMenu.ShowConditionalFormattingItem property is enabled, an end-user can apply style formats to a column using the column's Conditional Formatting menu.

Right-click the column to which a formatting rule should be applied, and select Conditional Formatting.

Select the rule type and then choose one of the predefined style formats.

To enable the multi-column item layout at the third menu level shown in the image above, set the grid control's MenuManager property (EditorContainer.MenuManager) to a BarManager component (if required, add this component to the form). Otherwise, menu elements at the third menu level will be arranged in a linear list; specific menu items will be displayed without glyphs.

Expanded Example: Creating Formatting Rules at Design Time and In Code

This example illustrates how to apply a data bar format to the Unit Price column in a GridControl at design time and in code.

Data bars fill column cells proportionally based on cell values relative to other cells. A longer bar corresponds to a higher value, and a shorter bar corresponds to a lower value.

To create a new formatting rule at design time, invoke the Format Rule Collection Editor from the Grid Designer. It can also be accessed from the Properties grid by clicking the ellipsis button for the ColumnView.FormatRules property.
  1. Invoke the Grid Designer and switch to the Style Format Rules page (in the Appearance category).

  2. Click the Add button to create a new format rule (format rules in a GridControl are encapsulated by GridFormatRule objects).
  3. Select the Format using Data bar rule type. The format rule's FormatRuleBase.Rule property will be set to a new FormatConditionRuleDataBar object.

  4. Set the GridFormatRule.Column property to the Unit Price column. This column provides values to test against the formatting rule.

    By default, the format is applied to the Unit Price column. However, you can apply this format to another column by setting the GridFormatRule.ColumnApplyTo property.

  5. Choose one of the predefined bars styles using the FormatConditionRuleDataBar.PredefinedName property. You can do this in the Properties tab or the Rule tab. Additionally, the Rule tab allows you to see a preview of the selected style. In this example, the Blue Data Bar Gradient style is selected.

    You can also provide a custom bar style using the FormatConditionRuleDataBar.Appearance and FormatConditionRuleDataBar.AppearanceNegative properties.

    By default, the FormatConditionRuleMinMaxBase.MinimumType and FormatConditionRuleMinMaxBase.MaximumType properties are set to Automatic. This means that the minimum and maximum values for applying the format are calculated automatically. You can also specify values to be considered minimum and maximum using the FormatConditionRuleMinMaxBase.Minimum and FormatConditionRuleMinMaxBase.Maximum properties (the MinimumType/MaximumType properties should be set to Number or Percent).

  6. Run the application. The image below illustrates the result.

The following code is equivalent to the design-time actions shown above.

Expanded More Examples

Expanded See Also

How would you rate this topic?​​​​​​​