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
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Collapse]Appearance and Conditional Formatting
    [Expand]Look and Feel
    [Expand]Appearances
    [Collapse]Conditional Formats
      Conditional Formatting
      Tutorial: Conditional Formatting
      How to: Apply a Data Bar Format to a Column
      How to: Apply an Icon Set Format to a Column
      How to: Apply a Two-Color Scale Format to a Column
      How to: Apply a Three-Color Scale Format to a Column
      How to: Highlight Column Values that Match a Condition
      How to: Highlight the Top 20% Column Values
      How to: Apply a Format Based on an Expression
    [Expand]Custom Painting
    [Expand]Alpha Blending and Background Images
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]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]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]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Apply an Icon Set Format to a Column

This example illustrates how to apply an icon set format to the Satisfaction column in a GridControl at design time using the Grid Designer and in code.

An icon set format allows you to classify column cell values into several ranges, assign an icon to each range, and display a specific icon in a cell according to the cell value. In this example, a predefined icon set is used to display empty, half-filled and filled star icons for small (from 0% to 33%), middle (from 33% to 67%) and large (more than 67%) values, respectively.

To create a new formatting rule at design time, invoke the Format Rule Collection Editor from the Grid Designer. It can also be accessed from the Properties grid by clicking the ellipsis button for the ColumnView.FormatRules property.

  1. Invoke the Grid Designer and switch to the Style Format Rules page (in the Appearance category).

  2. Click the Add button to create a new format rule (format rules in a GridControl are encapsulated by GridFormatRule objects).
  3. Select the Format using icons rule type. The format rule's FormatRuleBase.Rule property will be set to a new FormatConditionRuleIconSet object.

  4. Set the GridFormatRule.Column property to the Satisfaction column. This column provides values to test against the formatting rule.

    By default, this property also specifies the column to which formatting is applied. If required, you can apply formatting to another column by setting the GridFormatRule.ColumnApplyTo property.

  5. Choose one of the predefined icon sets using the FormatConditionRuleIconSet.IconSet property. You can do this in the Properties tab or the Rule tab. The Rule tab allows you to see a preview of the selected icon set. In this example, the Ratings: Stars3 icon set is selected.

    When choosing this predefined icon set (or any other predefined icon set), FormatConditionIconSetIcon objects are added to the IconSet.Icons collection. They refer to certain predefined icons via the FormatConditionIconSetIcon.PredefinedName property. You can change a specific icon to another predefined icon using the FormatConditionIconSetIcon.PredefinedName property, or to a custom icon using the FormatConditionIconSetIcon.Icon property.

    In addition, threshold values, comparison operators and value type are automatically set according to the selected icon set. You can change these options to custom values using the FormatConditionIconSetIcon.Value, FormatConditionIconSetIcon.ValueComparison and FormatConditionIconSet.ValueType properties.

  6. Run the application. The image below illustrates the result.

The following code is equivalent to the design-time actions shown above.

Expanded See Also

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