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.

Formatting rules can be created at design time or programmatically. The FormatConditions property provides access to a collection of rules, which are GridFormatConditionBase class descendants.

In this demo, the ApplytoRow property is set to true 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
<dx:BootstrapGridView runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID;ProductID">
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" Width="260px" />
        <dx:BootstrapGridViewDataColumn FieldName="Freight" />
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice" >
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="Discount" Settings-FilterMode="Value">
            <PropertiesSpinEdit DisplayFormatString="p0" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Quantity" />
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity * (1 - Discount)">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <FormatConditions>
        <dx:GridViewFormatConditionHighlight FieldName="Discount" Expression="[Discount] > 0" Format="GreenFillWithDarkGreenText" ApplyToRow="true" />
        <dx:GridViewFormatConditionTopBottom FieldName="Discount" Rule="TopItems" Threshold="15" Format="BoldText"  ApplyToRow="true" />
    </FormatConditions>
</dx:BootstrapGridView>

Cell Formatting

This example demonstrates conditional formatting applied to separate cells (in cases when a format condition object’s ApplytoRow property is not set).

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
<dx:BootstrapGridView runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID;ProductID">
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" Width="260px" />
        <dx:BootstrapGridViewDataColumn FieldName="Freight" SortOrder="Descending" />
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice" >
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="Discount" Settings-FilterMode="Value">
            <PropertiesSpinEdit DisplayFormatString="p0" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Quantity" />
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity * (1 - Discount)">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <FormatConditions>
        <dx:GridViewFormatConditionHighlight FieldName="Discount" Expression="[Discount] > 0" Format="GreenFillWithDarkGreenText" />
        <dx:GridViewFormatConditionTopBottom FieldName="Discount" Rule="TopItems" Threshold="15" Format="BoldText" />
        <dx:GridViewFormatConditionTopBottom FieldName="UnitPrice" Rule="AboveAverage" Format="ItalicText" />
        <dx:GridViewFormatConditionTopBottom FieldName="UnitPrice" Rule="AboveAverage" Format="RedText" />
        <dx:GridViewFormatConditionColorScale FieldName="Quantity" Format="BlueWhiteRed" />
        <dx:GridViewFormatConditionIconSet FieldName="Quantity" Format="Ratings4" />
        <dx:GridViewFormatConditionIconSet FieldName="Total" Format="Arrows5Colored" />
    </FormatConditions>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code