The Card 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 an access to a collection of rules, which are represented by the GridFormatConditionBase class descendants.
In this demo, the ApplyToCard property is set to true to specify that formatting should be applied to the whole card.
The style settings applied to card 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 card view export capabilities in the Export with Format Conditions demo.
<dx:BootstrapCardView runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID;ProductID">
<Columns>
<dx:BootstrapCardViewColumn FieldName="CompanyName" Width="260px" />
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice" >
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewSpinEditColumn FieldName="Discount" Settings-FilterMode="Value">
<PropertiesSpinEdit DisplayFormatString="p0" />
</dx:BootstrapCardViewSpinEditColumn>
</Columns>
<FormatConditions>
<dx:CardViewFormatConditionHighlight FieldName="Discount" Expression="[Discount] > 0" Format="GreenFillWithDarkGreenText" ApplyToCard="true" />
<dx:CardViewFormatConditionTopBottom FieldName="Discount" Rule="TopItems" Threshold="15" Format="BoldText" ApplyToCard="true" />
</FormatConditions>
<SettingsPager ItemsPerPage="8" NumericButtonCount="6"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
This example demonstrates conditional formatting applied to separate card items (in cases when a format condition object's ApplyToCard property is not set).
<dx:BootstrapCardView runat="server" DataSourceID="CompaniesOrdersDataSource" KeyFieldName="OrderID;ProductID">
<Columns>
<dx:BootstrapCardViewColumn FieldName="CompanyName" Width="260px" />
<dx:BootstrapCardViewColumn FieldName="Freight" SortOrder="Descending" Visible="false" />
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice" >
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewSpinEditColumn FieldName="Discount" Settings-FilterMode="Value">
<PropertiesSpinEdit DisplayFormatString="p0" />
</dx:BootstrapCardViewSpinEditColumn>
<dx:BootstrapCardViewColumn FieldName="Quantity" />
<dx:BootstrapCardViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity * (1 - Discount)">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
</Columns>
<FormatConditions>
<dx:CardViewFormatConditionTopBottom FieldName="Discount" Rule="TopItems" Threshold="15" Format="BoldText" />
<dx:CardViewFormatConditionTopBottom FieldName="UnitPrice" Rule="AboveAverage" Format="ItalicText" />
<dx:CardViewFormatConditionTopBottom FieldName="UnitPrice" Rule="AboveAverage" Format="RedText" />
<dx:CardViewFormatConditionIconSet FieldName="Quantity" Format="Ratings4" />
<dx:CardViewFormatConditionIconSet FieldName="Total" Format="Arrows5Colored" />
</FormatConditions>
<SettingsPager ItemsPerPage="8" NumericButtonCount="6"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>