Skip to main content

ColorEdit

  • 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.

@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.

coloredit-declaration.png

#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 Occurs on the client after a user changes the selected color in the color editor.
    ASPxClientColorEdit.GetColor Returns the color editor’s value.
    ASPxClientColorEdit.SetColor Specifies the color value for the color editor.