[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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]Get Started With Data Grid and Views
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Collapse]Appearance and Conditional Formatting
    [Expand]Custom Painting
    [Expand]Alpha Blending and Background Images
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com

Appearance and Conditional Formatting

Expanded Global Appearance Settings

The GridView.Appearance property provides access to a number of property sections. These sections store appearance properties for even and odd rows, focused cells, column headers, etc.

Expanded Highlight Cells That Belong to a Specific Column

Every column provides its own GridColumn.AppearanceCell property that allows you to override global appearance settings for all cells that belong to this column.

Demo: Appearance of column cells

Expanded Highlight an Active Editor

To highlight a currently active editor, handle the ColumnView.ShownEditor event and access the editor through the BaseView.ActiveEditor property.

Demo: Active editor’s background color

Expanded Conditional Formatting

Conditional formatting allows the Data Grid to automatically apply different appearance settings to cells depending on their content:

  • analyze all column cell values and visualize data distribution;
  • highlight specific values and dates;
  • highlight cells with smallest or larges values;
  • highlight values below or above average;
  • highlight unique or duplicate values;
  • use a custom formula to specify which cells to colorize;
  • temporarily highlight cells when their values change.

The following visualization effects are supported:

  • Color scales – the Data Grid compares cell values and fills these cells with solid colors picked from a palette that gradually shifts through two or three threshold colors, selected by you.

  • Data bars - cells are partly filled with a selected color. The fill percentage depends on how small or large this cell value is compared to other values in this column. It is also possible to draw a vertical axis at zero value. In this case data bars for positive and negative values go in opposite directions and are painted using different colors.

  • Icons - icon sets allow you to label each value range with a corresponding icon.

  • Static appearance settings - selected font settings, and background and foreground colors are applied to cells whose values meet the specific criteria (e.g., belong to top 10 values of this column).

  • Temporary highlight with an icon or color (when a value changes)

If the GridOptionsMenu.ShowConditionalFormattingItem option is enabled, end-users can right-click a column header to access the "Conditional Formatting" menu, which allows them to add, modify and clear formatting rules.

A number of format rules support animation effects applied when a cell value changes. See the FormatConditionRuleBase.AllowAnimation topic for more information.

To add a conditional formatting rule at design time, invoke the Grid Designer and switch to the Appearance->Format Rules tab. Click the "+" button to add a new rule.

In code, do the following:

  1. Create a new GridFormatRule object and place it into the ColumnView.FormatRules collection.
  2. Create an object of a class that derives from a parent FormatConditionRuleBase class.
  3. Assign a rule created in step 2 to the FormatRuleBase.Rule property of the object, created in step 1.
  4. Change the rule properties to tweak cutoff values, visualization effects, etc.

The code below adds a conditional formatting rule that highlights cells of the "Shipped Date" column for orders shipped prior to the current year.

More Examples

Expanded Change Cell Apperances Dynamically

Handle the GridView.RowCellStyle event to dynamically change cell appearances. For example, you can highlight specific cells in response to certain events. The code below changes the back color and content alignment for the "Name" column's cells depending on the boolean value of the "Mark" column.

You can also handle the GridView.RowStyle event to process and paint rows individually. For example, the code snippet below highlights focused rows.

The GridView.GroupLevelStyle event allows you to dynamically paint group rows and apply unique appearance settings for every group level. In the following example, different group row levels gain different appearance settings.


Expanded Override Custom Appearances for Selected Cells

Appearance settings of individual cells have lower priority than custom Column.AppearanceCell settings. For this reason, if you allow uses to select individual cells (OptionsSelection.MultiSelectMode = CellSelect) with custom appearances, regular and selected cells look the same. To adjust this behavior and highlight selected cells, handle the GridView.RowCellStyle event.

Expanded See Also

Is this topic helpful?​​​​​​​