Tutorial: Conditional Formatting
- 4 minutes to read
This walkthrough is a transcript of the Conditional Formatting video available on the DevExpress YouTube Channel.
The tutorial covers the Excel style conditional formatting feature. You will learn about the features available to end-users, see what types of formatting are available and how to set up conditional formatting at design-time or in code.
Enabling Conditional Formatting for End-Users
To allow end-users to apply conditional formatting to grid columns at runtime, expand the View’s GridView.OptionsMenu property and enable the GridOptionsMenu.ShowConditionalFormattingItemoption.
Run the application. Now, end-users can right-click a column and select Conditional Formatting to invoke the conditional formatting menu.
End-User Capabilities
Try a few different data formats and start with the Data Bar style. As you see, end-users only need to pick a style and the grid automatically displays the value bars that simplify data analysis.
The next format to try is Stars Icon Set. This style uses star icons – from empty to completely filled – to indicate how big or small column values are.
End-users can apply multiple format rules to a column and additionally set a two-color scale format for the same column. This format indicates value magnitudes using cell background colors.
Certain format rules require end-users to enter additional settings in dialog windows. For instance, select Top/Bottom Rules and then Top 10 items. In the dialog, enter a cutoff value of 15, choose the Green Fill with Green Text style and click OK. As a result, 15 top values in the column are highlighted.
If you have already applied one or more rules to columns, the Clear Rules submenu becomes available. It allows you to delete rules from one or all columns.
Creating Formatting Rules at Design Time
Next, create a format rule and apply it to the GridControl at design time.
You can access and create format rules by selecting a grid control’s View and using the ColumnView.FormatRules collection editor. An easier way to do this is by using the Grid Designer. Choose the Appearance category and switch to the Style Format Rules Page.
To create a new format rule, click Add (
). Set the GridFormatRule.Column property to the State column. This column provides values for the formatting rule. By default, the style settings are applied to cells in the same column. If required, you can apply formatting to another column by setting the GridFormatRule.ColumnApplyTo property.
Next, you need to select the rule type from the dropdown list. To highlight states that start with the letter ‘N’, choose the Format based on user defined expression.
Use the FormatConditionRuleAppearanceBase.PredefinedName property to apply a predefined Red Bold Text style to target cells.
Then, specify criteria for the rule using the Expression Editor. Click the ellipsis button for the FormatConditionRuleExpression.Expression property to invoke this editor. Filter the function list to only display string functions. Locate the StartsWith item and double-click it to insert it to the editor control. Find the State field and specify it as the first parameter of the function and enter the ‘N’ character as the second parameter.
After that, you can switch to the Rule tab and see the selected style’s preview.
Run the application. The format highlights the State column’s cells that start with the letter ‘N’.
Customizing Format Rules in Code
The next step is to see how to create new format rules and customize the created rules in code. Modify the existing format rule in a button’s Click event handler. Use the ColumnView.FormatRules property to access the rule collection. The indexer returns an object of the base FormatConditionRuleBase class from which all rule types derive. This means you need to cast the rule object to the required type and then you can access the FormatConditionRuleExpression.Expression property. Apply the format to entire rows instead of individual cells using the GridFormatRule.ApplyToRow property.
private void btnChangeRule_ItemClick(object sender, ItemClickEventArgs e) {
(gridView.FormatRules[0].Rule as FormatConditionRuleExpression).Expression = "StartsWith([State], \'M\')";
gridView.FormatRules[0].ApplyToRow = true;
}
Run the application and click the button to see the result. Now, the format is applied to the grid’s rows whose State value starts with the letter ‘M’.
