How to: Apply Conditional Formatting to Grid Cells using the Bar Gradient Ranges Format Condition

  • 2 minutes to read

The Bar Gradient Ranges condition (FormatConditionGradientRangeBar) allows you to visualize numeric values using bars whose colors are contained in the specified color gradient.

This example shows how to apply conditional formatting to Grid cells using the predefined Red-Blue color gradient. Click the Update Formatting button to change start/end colors and the number of ranges in the color gradient. The third color in the middle of the color scale is also specified to generate a 3-color gradient.

View Example: How to Apply Bar Gradient Ranges Conditional formatting to Grid Cells

using DevExpress.DashboardCommon;
using DevExpress.DashboardWin;
using System.Drawing;

namespace Grid_IconRangeCondition {
    public partial class Form1 : DevExpress.XtraEditors.XtraForm {
        public Form1() {
            dashboardViewer1.CustomizeDashboardTitle += DashboardViewer1_CustomizeDashboardTitle;
            Dashboard dashboard = new Dashboard(); dashboard.LoadFromXml(@"..\..\Data\Dashboard.xml");
            dashboardViewer1.Dashboard = dashboard;
            GridDashboardItem grid = (GridDashboardItem)dashboard.Items["gridDashboardItem1"];
            GridMeasureColumn extendedPrice = (GridMeasureColumn)grid.Columns[1];

            GridItemFormatRule rangeRule = new GridItemFormatRule(extendedPrice);
            FormatConditionGradientRangeBar rangeBarCondition =
                new FormatConditionGradientRangeBar(FormatConditionRangeGradientPredefinedType.BlueRed);
            rangeBarCondition.BarOptions.ShowBarOnly = true;
            rangeRule.Condition = rangeBarCondition;


        private void DashboardViewer1_CustomizeDashboardTitle(object sender, CustomizeDashboardTitleEventArgs e)
            DashboardToolbarItem itemUpdate = new DashboardToolbarItem(
                (args) => UpdateFormatting())
                Caption = "Update Formatting",

        private void UpdateFormatting() {
            GridDashboardItem grid = (GridDashboardItem)dashboardViewer1.Dashboard.Items[0];
            GridItemFormatRule rangeRule = grid.FormatRules[0];

            FormatConditionGradientRangeBar rangeCondition =
            rangeCondition.Generate(new BarStyleSettings(Color.PaleVioletRed),
                                    new BarStyleSettings(Color.PaleGreen), 9);
            RangeInfo middleRange = rangeCondition.RangeSet[4];
            middleRange.StyleSettings = new BarStyleSettings(Color.SkyBlue);

            rangeRule.Condition = rangeCondition;
See Also