Row Formatting

The Grid View control supports conditional formatting, i.e., automatically applies cell formatting based on the specified rules. This feature helps end-users quickly notice critical information, identify trends and exceptions, and compare data.

You can define a collection of format conditions using the FormatConditions method. This method takes a delegate whose argument provides access to methods allowing you to create and configure different kinds of format conditions.

In this demo, format conditions' ApplyToRow method is called with the true parameter to specify that formatting should be applied to the whole row.

The style settings applied to grid cells can be exported together with data to various formats using our data aware export engine. Moreover, when we export data to Excel formats (XLS and XLSX), the format conditions are transformed to corresponding Excel conditional formatting rules. Therefore, you can manage the rules in Excel after export. You can take a look at a grid export capabilities in the Export with Format Conditions demo.

Company Name Freight Unit Price Discount Quantity Total
Vins et alcools Chevalier32$14.000 %12$168.00
Vins et alcools Chevalier32$10.000 %10$100.00
Vins et alcools Chevalier32$35.000 %5$175.00
Toms Spezialitäten12$19.000 %9$171.00
Toms Spezialitäten12$42.000 %40$1,680.00
Hanari Carnes66$8.000 %10$80.00
Hanari Carnes66$42.0015 %35$1,249.50
Hanari Carnes66$17.0015 %15$216.75
Victuailles en stock41$17.005 %6$96.90
Victuailles en stock41$16.005 %15$228.00
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("GridViewRowFormatting")
    .KeyFieldName("OrderID")
    .Columns(columns => {
        ...
    })
    .FormatConditions(conditions => {
        conditions.AddHighlight()
            .FieldName("Discount")
            .Expression("[Discount] > 0")
            .Format(GridConditionHighlightFormat.GreenFillWithDarkGreenText)
            .ApplyToRow(true);
        conditions.AddTopBottom()
            .FieldName("Discount")
            .Rule(GridTopBottomRule.TopItems)
            .Threshold(15)
            .Format(GridConditionHighlightFormat.BoldText)
            .ApplyToRow(true);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("RowFormatting")))
    .Bind(Model))

Cell Formatting

This example demonstrates conditional formatting applied to separate cells.

Company Name Freight
Unit Price Discount Quantity Total
QUICK-Stop1008$13.000 %35$455.00
QUICK-Stop1008$264.000 %30$7,920.00
QUICK-Stop1008$31.000 %40$1,240.00
QUICK-Stop1008$10.000 %60$600.00
Queen Cozinha891$28.0025 %42$882.00
Queen Cozinha891$27.0025 %70$1,417.50
Queen Cozinha891$211.0025 %40$6,330.00
Queen Cozinha891$65.0025 %12$585.00
Save-a-lot Markets831$55.0025 %100$4,125.00
Save-a-lot Markets831$124.0025 %60$5,580.00
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("GridViewCellFormatting")
    .KeyFieldName("OrderID")
    .Columns(columns => {
        ...
    })
    .FormatConditions(conditions => {
        conditions.AddTopBottom()
            .FieldName("UnitPrice")
            .Rule(GridTopBottomRule.AboveAverage)
            .Format(GridConditionHighlightFormat.ItalicText);
        conditions.AddTopBottom()
            .FieldName("UnitPrice")
            .Rule(GridTopBottomRule.AboveAverage)
            .Format(GridConditionHighlightFormat.RedText);
        conditions.AddTopBottom()
            .FieldName("Discount")
            .Rule(GridTopBottomRule.TopItems)
            .Threshold(15)
            .Format(GridConditionHighlightFormat.BoldText);
        conditions.AddHighlight()
            .FieldName("Discount")
            .Expression("[Discount] > 0")
            .Format(GridConditionHighlightFormat.GreenFillWithDarkGreenText);
        conditions.AddColorScale()
            .FieldName("Quantity")
            .Format(GridConditionColorScaleFormat.BlueWhiteRed);
        conditions.AddIconSet()
            .FieldName("Quantity")
            .Format(GridConditionIconSetFormat.Ratings4);
        conditions.AddIconSet()
            .FieldName("Total")
            .Format(GridConditionIconSetFormat.Arrows5Colored);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("CellFormatting")))
    .Bind(Model))
Screen Size
Color Themes
Demo QR Code