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.
| Vins et alcools Chevalier | 32 | $14.00 | 0% | 12 | $168.00 |
| Vins et alcools Chevalier | 32 | $10.00 | 0% | 10 | $100.00 |
| Vins et alcools Chevalier | 32 | $35.00 | 0% | 5 | $175.00 |
| Toms Spezialitäten | 12 | $19.00 | 0% | 9 | $171.00 |
| Toms Spezialitäten | 12 | $42.00 | 0% | 40 | $1,680.00 |
| Hanari Carnes | 66 | $8.00 | 0% | 10 | $80.00 |
| Hanari Carnes | 66 | $42.00 | 15% | 35 | $1,249.50 |
| Hanari Carnes | 66 | $17.00 | 15% | 15 | $216.75 |
| Victuailles en stock | 41 | $17.00 | 5% | 6 | $96.90 |
| Victuailles en stock | 41 | $16.00 | 5% | 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>
This example demonstrates conditional formatting applied to separate cells (in cases when a format condition object's ApplytoRow property is not set).
| QUICK-Stop | 1008 | $13.00 | 0% | 35 | $455.00 |
| QUICK-Stop | 1008 | $264.00 | 0% | 30 | $7,920.00 |
| QUICK-Stop | 1008 | $31.00 | 0% | 40 | $1,240.00 |
| QUICK-Stop | 1008 | $10.00 | 0% | 60 | $600.00 |
| Queen Cozinha | 891 | $28.00 | 25% | 42 | $882.00 |
| Queen Cozinha | 891 | $27.00 | 25% | 70 | $1,417.50 |
| Queen Cozinha | 891 | $211.00 | 25% | 40 | $6,330.00 |
| Queen Cozinha | 891 | $65.00 | 25% | 12 | $585.00 |
| Save-a-lot Markets | 831 | $55.00 | 25% | 100 | $4,125.00 |
| Save-a-lot Markets | 831 | $124.00 | 25% | 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>