[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Data Access Layer
   UI Generation
   [Collapse]Building Outlook-Inspired and Hybrid UI Applications
     Lesson 1 - Automatically Generate Outlook-Inspired and Hybrid User Interfaces From Entity Framework
     Lesson 2 - Show Splash Screen on the Start of the Application
     Lesson 3 - Customize Layout of the Collection Views
     Lesson 4 - Show Sparkline Charts in Grid Cells
     Lesson 5 - Use Cards Layout in Collection Views
     Lesson 6 - Use Master-detail Data Representation in Collection Views
     Lesson 7 - Using Conditional Formatting in Grid
     Lesson 8 - Add Advanced End-user Filtering Functionality to Applications
     Lesson 9 - Show Windows 8-style Toast Notifications
     Lesson 10 - Add Windows 7-style Jump List to the Application
     Lesson 11 - Add Custom Actions to Application's Taskbar Thumbnail
   [Expand]Building Office-Inspired Applications
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 7 - Using Conditional Formatting in Grid

In this lesson, you will learn how to customize the appearance of grid cells using conditional formatting capabilities provided by the GridControl.

The EmployeeTaskCollectionView module from DevExpress.HybridApp is used to showcase applying format conditions to the GridControl.

Expanded Step 1 - Using Projections to Sort Tasks

In the Lesson 3 - Customize Layout of the Collection Views, you used the projections mechanism to order items in the UI. In the employee tasks module, tasks should be arranged so the most recent tasks are shown at the top. Add the OrderByDescending projection query to the base constructor invocation in the EmployeeTaskCollectionViewModel class.

Expanded Step 2 - Using Data Bar Format Condition to Indicate Task Completion Progress

Customize the GridControl as described in the Lesson 3 - Customize Layout of the Collection Views.

Configure the % Complete column to show its values as percentages. Select the % Complete column, invoke its smart tag and set the ColumnBase.EditSettings property to TextEditSettings. Invoke the Mask property editor.

In the Mask Editor, select the Percent (mode 1) (integer) predefined mask and click OK.

You will use the DataBarFormatCondition to display task completion progress. To add one of the predefined data bar formats, select the % Completed column, invoke its context menu and select the Conditional Formatting | Data Bars | Blue Data Bar option.

By default, the minimum and maximum values for the data bar are automatically calculated based on the minimum and maximum cell values for the corresponding column. You will however set the minimum and maximum values explicitly to 0 and 100 so that data bar is always rendered correctly even if there are no 0 and/or 100 values in the column. Invoke context menu for the % Complete columns and select Conditional Formatting | Manage Rules.

In the Conditional Formatting Rules Manager double-click the Data Bar rule. In the Edit Format Rule window, set the Min Value to 0 and Max Value to 100.

To display icons in the Priority column, use the IconSetFormatCondition. Select the Priority column and invoke the Conditional Formatting Rules Manager for it. Click the New Rule button, set up the new formatting rule as shown below and click OK.

To display completed tasks with strikethrough text, select the % Complete column, invoke its context menu and select Conditional Formatting | Highlight Cell Rules | Equal To.

Set up the Equal To rule as shown below.

Run the application.

The GridControl provides conditional formatting rules customization at runtime. Select the grid view using the Customization Panel and set the TableView.AllowConditionalFormattingMenu property to true.

Run the application and invoke the context menu for any grid column. The Conditional Formatting sub menu provides the end-user to customize conditional formatting rules.

Applications that contain the result of this lesson are available here: DevExpress.OutlookInspiredApp and DevExpress.HybridApp.

Expanded See Also

Is this topic helpful?​​​​​​​