ColorEdit

  • 2 min 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):

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

View code (Razor):

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