ColorEdit

• Aug 08, 2019
• 2 minutes to read

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

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.

Declaration

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

View code (ASPX):

C#

<% 
    Html.DevExpress().ColorEdit(
        settings => {
            settings.Name = "colorEdit1";
            settings.Color = System.Drawing.Color.FromName("red");
        }
    )
    .Render();
%> 

View code (Razor):

C#

@Html.DevExpress().ColorEdit(
    settings => {
        settings.Name = "colorEdit1";
        settings.Color = System.Drawing.Color.FromName("red");
    }).GetHtml()

Note

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

The code result is demonstrated in the image below.

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.