Default Color Edit
The Color Edit provides a UI for selecting colors from a predefined drop-down palette. Users can also enter any of the following notations in the edit box to specify colors:
- Longhand or shorthand hexadecimal color notations - #f0f, #D8D8D8;
- RGB values without an alpha channel - rgb(0,256,256);
- Standard HTML colors - red, green;
- Standard SVG colors.
You can use the Color property or the Value property in text format to specify the editor's color programmatically. To modify the predefined palette's items, use the Items property.
To interact with the control on the client, use the following members:
<dx:BootstrapColorEdit runat="server" Color="Blue">
</dx:BootstrapColorEdit>
Custom Color
You can add a Custom Color palette to the drop-down color editor, and users can use the color picker to select custom colors. To show the Custom Color palette, set the EnableCustomColors property to true.
<dx:BootstrapColorEdit runat="server" Color="#EE82EE" EnableCustomColors="true">
</dx:BootstrapColorEdit>
Null Text
Use the NullText property to display prompt text (watermark) in the editor's edit box. The specified text is displayed when the editor's value is null and the editor is not focused. The prompt text disappears when the editor is focused.
To specify whether the text should also be displayed in the unfocused state, use the NullTextDisplayMode property.
<dx:BootstrapColorEdit runat="server" NullText="Select a color">
</dx:BootstrapColorEdit>
Caption and HelpText
This demo adds a caption (Color) and auxiliary help text (Select a color) to the Color Edit. You can use the Caption and the HelpText properties to specify the caption and help text.
<dx:BootstrapColorEdit runat="server" Caption="Color" HelpText="Select a color">
</dx:BootstrapColorEdit>
Custom Palletes
Use the Items property to change the colors in the drop-down palette.
<dx:BootstrapColorEdit ID="ColorEditPallete" runat="server">
</dx:BootstrapColorEdit>
protected void Page_Load(object sender, EventArgs e) {
ColorEditPallete.Items.Clear();
ColorEditPallete.Items.Add(System.Drawing.Color.FromArgb(86, 61, 124));
ColorEditPallete.Items.Add(System.Drawing.Color.FromArgb(203, 189, 226));
ColorEditPallete.Items.Add(System.Drawing.Color.FromArgb(229, 225, 234));
ColorEditPallete.Items.Add(System.Drawing.Color.FromArgb(249, 249, 249));
ColorEditPallete.Items.Add(System.Drawing.Color.FromArgb(255, 255, 255));
}
Automatic Color
An Automatic Color Item can be shown at the top of a palette. The AutomaticColor property specifies its color, and the EnableAutomaticColorItem property controls the item's visibility.
<dx:BootstrapColorEdit runat="server" EnableAutomaticColorItem="true" AutomaticColor="#cecece"
AutomaticColorItemCaption="Automatic" AutomaticColorItemValue="Auto">
</dx:BootstrapColorEdit>