Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Collapse]Getting Started
    [Collapse]Walkthroughs
     [Collapse]Appearance and Conditional Formatting
       Tutorial: Conditional Formatting
       Tutorial: Custom Drawing
       Tutorial: Custom Styles for Rows and Cells
       Tutorial: View and Column Appearance
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Grouping
     [Expand]Filter and Search
     [Expand]Sorting
     [Expand]Summaries
     [Expand]Split Presentation
     [Expand]Row Preview Sections
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Conditional Formatting

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.

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

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

Expanded 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'.

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

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

Expanded See Also

How would you rate this topic?​​​​​​​