Formatting Top and Bottom Values

• Aug 27, 2019
• 3 minutes to read

The Top-Bottom conditional format allows you to highlight a specific number of top/bottom values. You can specify this number as an absolute or percent value.

The image below shows the grid column whose top 20 Profit values are green.

This topic consists of the following sections:

• Adding Rules in Code
• Adding Rules Using Conditional Formatting Menu
• Adding Rules Using Conditional Formatting Rules Manager

Adding Rules in Code

Create the TopBottomRuleFormatCondition class instance and specify the following settings to create a conditional format in code:

• Specify the rule type using the TopBottomRuleFormatCondition.Rule property.
• Specify the required rank value using the TopBottomRuleFormatCondition.Threshold property.
• Use the FormatConditionBase.FieldName property to specify the column’s field name to which to apply the conditional format.

• Specify the target cells’ formatting:

  • Use the FormatConditionBase.PredefinedFormatName property to specify the predefined format, or
  • Set the custom format using the ExpressionConditionBase.Format property.
• Add the resulting TopBottomRuleFormatCondition instance to the TableView.FormatConditions (or TreeListView.FormatConditions) collection.

The following code sample illustrates how to define a conditional format in markup:

XAML

<dxg:TableView.FormatConditions>
   <dxg:TopBottomRuleFormatCondition Rule="TopItems" Threshold="20" FieldName="Profit" PredefinedFormatName="GreenFillWithDarkGreenText" />
</dxg:TableView.FormatConditions>

The code sample below illustrates how to define the same conditional format in code-behind:

C#

var profitFormatCondition = new TopBottomRuleFormatCondition() {
   Rule = TopBottomRule.TopItems,
   Threshold = 20,    
   FieldName = "Profit", 
   PredefinedFormatName = "GreenFillWithDarkGreenText"
};
view.FormatConditions.Add(profitFormatCondition);

VB.NET

Dim profitFormatCondition = New TopBottomRuleFormatCondition() With {
   .Rule = TopBottomRule.TopItems,
   .Threshold = 20,
   .FieldName = "Profit",
   .PredefinedFormatName = "GreenFillWithDarkGreenText"
}
view.FormatConditions.Add(profitFormatCondition)

Adding Rules Using Conditional Formatting Menu

1. Select the Top/Bottom Rules item in the Conditional Formatting Menu, and choose the required conditional format in the invoked sub menu.
2. Specify a rank value in the invoked dialog.
3. Choose a format to define the applied rule’s visual appearance. The conditional formatting menu allows you to use only predefined formats stored within the TableView.PredefinedFormats (or TreeListView.PredefinedFormats) collection.
4. Enable the apply format to the entire row option to apply a conditional format to the entire row, if necessary.

Adding Rules Using Conditional Formatting Rules Manager

1. Click the New Rule… in the Conditional Formatting Rules Manager.
2. Select the Format only top or bottom ranked values rule in the invoked New Formatting Rule dialog.
3. Choose the conditional format (Top or Bottom), and specify a rank value. Enable the % of the column’s cell values option to use percent rank value, if necessary.
4. To define the visual appearance of the applied rule, click the Format button, and specify the required settings in the invoked Format Cells dialog. See the Format Cells Dialog Window section of the Conditional Formatting Rules Manager topic to learn more.