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
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Collapse]Gauges
   [Expand]Getting Started
   [Expand]Concepts
   [Expand]Design-Time Features
   [Collapse]Examples
     How to: Add and Customize Gauge Animation
     How To: Bind a Gauge Control to a Data Source
     How to: Bind a Gauge Control to a Data Source at Runtime
     How to: Create a Circular Gauge (Design-time)
     How to: Create a Circular Gauge (Runtime)
     How To: Create a Digital Gauge (Design-time)
     How To: Create a Digital Gauge (Runtime)
     How To: Create a Gauge From Scratch (Runtime)
     How To: Create a Linear Gauge (Design-time)
     How To: Create a Linear Gauge (Runtime)
     How To: Create a State Indicator Gauge (Design-time)
     How To: Create a State Indicator Gauge (Runtime)
     How To: Custom Draw a Gauge Control
     How to: Move Value Indicators at Runtime
     How To: Use Gauges for In-Place Editing
   [Expand]Product Information
  [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: Use Gauges for In-Place Editing

DevExpress data-aware controls like Data Grid and Tree List allow your end-users to edit data using embedded editors from the Editors library. Since gauges are not part of the Editors library, in-place editing using gauges is not supported out-of-the-box. However, you can manually embed gauges into data cells by using the RepositoryItemAnyControl object. This example demonstrates how to do that.

  1. Create a sample WinForms application and drop a Data Grid onto the main form.
  2. Add a new class that will define your sample data.
  3. Bind your Data Grid to this sample data. To do so, specify the Grid Control's GridControl.DataSource property.

    Run the application to ensure your data is loaded correctly.

  4. To visualize the "Severity" field, drop a Gauge Control onto the form. When you do so, the Preset Manager will pop up automatically. Apply the "ElectricLights" preset to create a state indicator gauge that displays red, yellow and green lights.
  5. Resize your gauge as required and set its visibility (the Visible property) to false.
  6. Add a method that will create a new RepositoryItemAnyControl with the required gauge control within and use this object as the in-place editor for the target grid column.
  7. To replace the default combo box editor for the existing column, use the following code.

    If you run the application, you will notice that the "Severity" column is now populated with gauges, which receive their values automatically.

Expanded Providing Custom Gauge Values

The steps above demonstrate the most simple scenario - gauges are used to replace default in-place editors for a column that is already populated. At the same time, cell values for this column contain integer enumerator values acceptable to your gauges.

If your in-place gauges should display custom values, you will need to process these values manually. For instance, in the example above, you could create a new unbound column with gauges instead of replacing the existing "Severity" column. For this scenario, repeat the first six steps from the sequence above and then do the following.

  1. Create an unbound column and use the custom CreateGaugeEdit method to set this column's in-place editor.

    Since an unbound column provides no cell values by default, all gauges will display the same gray indicator if you now run the application.

  2. To supply your gauges with values, first create a separate class that implements required interfaces declared in the DevExpress.XtraGauges.Win.Base namespace. There are three of these interfaces:
    • IValueProvider - a mandatory interface that provides values to gauges;
    • IColorSchemeProvider - an optional interface that allows you to apply different color schemes to individual gauges;
    • IImageColorProvider - an optional interface that allows you to colorize gauge image indicators.

    The State indicator gauge that you created supports neither color schemes nor images, so your custom value class will look like the following.

  3. Handle the ColumnView.CustomUnboundColumnData event. In this event handler, you need to retrieve the current record severity and pass it to a new instance of you custom SeverityGaugeEditValue class. By doing so, you will pass this severity value to a gauge.
  4. Run the application to see the final result.

    Notice that you only have to pass a value to a gauge. It is not required to manually bind this value to the StateIndicator.StateIndex property of a state indicator gauge. Similarly, if you have an analog gauge, you do not have to explicitly bind this value with a scale value. This happens because gauges implement the DevExpress.XtraEditors.CustomEditor.IAnyControlEdit interface out-of-the-box and thus, process the edit value automatically. On the other hand, this behavior supports only simple gauges with one scale or one image indicator. For more complex scenarios (e.g., a gauge with two scales that display values of two separate data fields) you will have to create your own DevExpress.XtraEditors.CustomEditor.IAnyControlEdit interface implementation.

The code above makes use of the IValueProvider interface only. To see a more complex example with gauges that utilize all three I...Provider interfaces, explore the "Gauge Editor" module of the main Data Grid demo (located at %Public%\Documents\DevExpress Demos 17.1\Components\WinForms\CS\GridMainDemo).

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