A newer version of this page is available. Switch to the current version.

Appearance and Conditional Formatting

  • 6 minutes to read

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.

Data Grid - Appearances

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.

Data Grid - Column Appearances

Demo: Appearance of column cells

Highlight an Active Editor

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

Data Grid - Selected Editor


gridView.ShownEditor += (s, e) => {
        GridView view = s as GridView;
        gridView.ActiveEditor.BackColor = Color.DodgerBlue;
    };

Demo: Active editor’s background color

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.

Data Grid - Row Cell Style


gridView.RowCellStyle += (sender, e) => {
        GridView view = sender as GridView;
        bool _mark = (bool)view.GetRowCellValue(e.RowHandle, "Mark");
        if(e.Column.FieldName == "Name") {
            e.Appearance.BackColor = _mark ? Color.LightGreen : Color.LightSalmon;
            e.Appearance.TextOptions.HAlignment = _mark ? HorzAlignment.Far : HorzAlignment.Near;
        }
    };

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

Data Grid - RowStyle


Color foreColor = Color.Brown;
    Color backColor = Color.LightGreen;

    //Changing the appearance settings of row cells dynamically
    gridView.RowStyle += (sender, e) => {
        GridView view = sender as GridView;
        //Change selected rows' fore and back colors
        if(view.IsRowSelected(e.RowHandle)) {
            e.Appearance.ForeColor = foreColor;
            e.Appearance.BackColor = backColor;
            /* This property controls whether settings provided by the RowStyle event have a higher priority 
               than the appearances specified by GridViewAppearances.EvenRow 
               and GridViewAppearances.OddRow properties */
            e.HighPriority = true;
        }
    };

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.

Data Grid - Group Row Appearances


gridView.GroupLevelStyle += (s, e) => {
        if(e.Level == 0) {
            e.LevelAppearance.ForeColor = Color.WhiteSmoke;
            e.LevelAppearance.BackColor = Color.Salmon;
        } else {
            e.LevelAppearance.ForeColor = Color.FromArgb(50, 50, 50);
            e.LevelAppearance.BackColor = Color.LightSalmon;
        }
    };

Demos: Appearance of column cells (dynamically) | Appearance of rows (dynamically) | Appearance of group levels

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.

Highlighting cells includes the following visualization effects:

  • 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 Grid - Conditional Formatting - Color Scales

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

    Data Grid - Conditional Formatting - Data Bars

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

    Data Grid - Conditional Formatting Icons

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

    Data Grid - Conditional Formatting - Static Appearance

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.

Data Grid - Conditional Formatting - Runtime Menu

To add a conditional formatting rule at design time, invoke the Grid Designer and switch to the "Appearance" tab. Select the "Format Rules" menu item and click the "+" button to add a new rule. The property grid to the Designer's right contains two tabs. In the "Properties" tab, select a visualization effect (color scale, data bar, etc.), the column whose values you need to analyze and the column whose cells to paint.

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


GridFormatRule formatRule = new GridFormatRule();
FormatConditionRuleDateOccuring dateRule = new FormatConditionRuleDateOccuring();
dateRule.Appearance.BackColor = Color.Lime;
dateRule.DateType = FilterDateType.PriorThisYear;
formatRule.Rule = dateRule;
formatRule.ColumnApplyTo = formatRule.Column = colShippedDate;
gridView1.FormatRules.Add(formatRule);
//or
GridFormatRule formatRule = gridView1.FormatRules.AddDateOccurringRule(colShippedDate, FilterDateType.PriorThisYear,
    new DevExpress.Utils.AppearanceDefault(){ BackColor = Color.Lime});

More Examples

See Also