[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
   Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Collapse]Data Editors
    Editor List
    Main Features
   [Expand]Common Concepts
    [Expand]Visual Elements
    Filter Control
    Validation Summary
   [Expand]Strongly-Typed Editor Types
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[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)


ColorEdit represents a color editor control that has a dropdown window with a color palette.

Expanded Implementation Details

ColorEdit is realized by the ColorEditExtension class. Its instance can be accessed via the ExtensionsFactory.ColorEdit helper method, which is used to add a ColorEdit extension to a view. This method's parameter provides access to the ColorEdit's settings implemented by the ColorEditSettings class, allowing you to fully customize the extension.

ColorEdit's client counterpart is represented by the ASPxClientColorEdit object.

Expanded Declaration

ColorEdit can be added to a view in the following manner.

View code (ASPX):

View code (Razor):


The Partial View should contain only the extension's code.

The code result is demonstrated in the image below.

Expanded Main Features

  • Easy Color Selection

    The ColorEdit editor allows end-users to easily enter a color by selecting a color from the color palette in the editor's dropdown window, or (if the ColorEditSettings.Properties.AllowUserInput property value is set to true) by typing a color code directly into the editor's text box using a longhand or shorthand hexadecimal notation (HEX) for RGB color values (such as #f0f, #D8D8D8). It is also possible to type HTML color names (such as "red", "green", etc.), which are then automatically converted to color codes.

  • Color on Error

    When an end-user inputs a wrong value (i.e., wrong color code), the previous valid color or null value can be chosen, which is defined via the ColorEditSettings.Properties.ColorOnError (ColorEditProperties.ColorOnError) property.

  • Built-in Validation

    The ColorEdit extension allows you to perform data validation both on the client and server side. See the Built-in Validation topic to learn more.

  • Full-Featured Client-Side API

    The ColorEdit provides you with a comprehensive client-side API. This API is implemented using JavaScript and is exposed via the ASPxClientColorEdit object. The ASPxClientColorEdit object serves as the client-side equivalent of the ColorEdit extensions.

    You can operate with the editor values using the following methods.

    Method Description
    ASPxClientColorEdit.ColorChanged Fires after the selected color has been changed within the color editor via end-user interaction.
    ASPxClientColorEdit.GetColor Returns the color editor's value.
    ASPxClientColorEdit.SetColor Specifies the color value for the color editor.

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