Formatting Top and Bottom Values

  • 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.

CFTopBottomExample

This topic consists of the following sections:

Adding Rules in Code

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

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

<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:

var profitFormatCondition = new TopBottomRuleFormatCondition() {
   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.

CFTopBottomMenu

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.

CFManagerTopBottom

See Also