[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Collapse]ASP.NET Bootstrap Controls
  Overview
 [Expand]Getting Started
 [Expand]Demos and Sample Applications
 [Expand]Project Configuration
 [Expand]Grid View
 [Expand]Card View
 [Expand]Scheduler
 [Expand]Spreadsheet
 [Expand]Rich Text Editor
 [Expand]Charts
  Sparkline
 [Collapse]Data Editors
   Binary Image
   Button
   Button Edit
   Calendar
   Check Box
   Check Box List
   Color Edit
   Combo Box
   Date Edit
   Dropdown Edit
   Hyperlink
   List Box
   Memo
   Progress Bar
   Radio Button
   Radio Button List
  [Expand]Range Selector
   Spin Edit
   Tag Box
   Text Box
   Time Edit
  [Expand]Upload Control
 [Expand]Site Navigation
 [Expand]Site Layout
  File Manager
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Color Edit

The BootstrapColorEdit control allows end users to specify a color. They can type a value in the edit box or pick a color from the drop-down palette.

The main Bootstrap Color Edit features are:

Expanded Multiple Ways to Specify Color Value

You can use any of the following notations to specify colors in the edit box:

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

To disable the editor's text box, set the ASPxButtonEditBase.AllowUserInput property to false.

Use the ASPxColorEdit.Color / ASPxColorEdit.Value properties to specify the editor’s value (color-based or in text format).

Expanded Custom Color Picker

To show the Custom Color palette, set the ASPxColorEdit.EnableCustomColors property to true.

Expanded Custom Palettes

Use the ASPxColorEdit.Items property to customize the drop-down color palette.

Expanded Automatic Color Item

To show an Automatic Color Item at the top of the palette, set the ASPxColorEdit.EnableAutomaticColorItem property to true and use the ASPxColorEdit.AutomaticColor property to specify item's color.

Expanded Color on Error

When a user enters an incorrect color code into the Color Edit, the control is automatically set to the previous valid color. To change this behavior, set the ASPxColorEdit.ColorOnError property to Null so that the control is set to a null value in these cases.

Expanded Caption and Help Text

Use the ASPxEditBase.Caption and the ASPxTextEdit.HelpText properties to specify the Color Edit's caption and auxiliary help text.

Expanded Prompt Text

Use the ASPxColorEdit.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 focused state, use the ASPxTextEdit.NullTextDisplayMode property.

Expanded Built-in Validation

The Bootstrap Color Edit control allows you to validate user input on the client and server side. Refer to the Validation topic for more information.

Expanded Full-Featured Client-Side API

On the client side, use the BootstrapClientColorEdit class to interact with the editor as specified below:

Expanded Online Demos

DevExpress Bootstrap controls are shipped with online feature-based demos. To preview the Bootstrap Color Editor and its features, click See Demos.

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