ColorPicker

An input with a color picker attached to it for selecting a color.

ColorPicker

Adding ColorPicker

You can easily add a ColorPicker control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "colorpicker",
            name: "colorpicker",
            labelWidth: "200px",
            label: "Choose your color"
        }
    ]
});

Attributes

You can provide the following attributes in the configuration object of a ColorPicker:

type	(string) the type of a control, set it to "colorpicker"
name	(string) the name of a control
id	(string) the id of a control, auto-generated if not set
value	(string) the value of a colorpicker
validation	(function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
width	(string\|number\|"content") the width of a control
height	(string\|number\|"content") the height of a control
padding	(string\|number) sets padding between a cell and a border of the ColorPicker control
css	(string) adds style classes to a control
icon	(string) the name of an icon from the used icon font
placeholder	(string) a tip for the input
editable	(boolean) allows a user to enter the value of the control manually
disabled	(boolean) defines whether a control is enabled (false) or disabled (true)
required	(boolean) defines whether a control is required
hidden	(boolean) defines whether a control is hidden
label	(string) specifies a label for a control
labelWidth	(string\|number) sets the width of the label of a control
hiddenLabel	(boolean) invisible label that will be used to identify the input on the server side
labelPosition	(string) defines the position of a label: "left"\|"top"
helpMessage	(string) adds a help message to a control
preMessage	(string) a message that contains instructions for interacting with the control
successMessage	(string) a message that appears in case of successful validation of the control value
errorMessage	(string) a message that appears in case of error during validation of the control value
mode	(string) the mode of a control: "palette" (default), "picker"
palette	(array) contains arrays of colors you want to be shown in a colorpicker
paletteOnly	(boolean) defines whether ColorPicker is shown only the palette mode
pickerOnly	(boolean) defines whether ColorPicker is shown only the picker mode
customColors	(array) shows a section with custom colors in the bottom part of the ColorPicker
grayShades	(boolean) defines whether the section with gray shades is displayed in the palette

Working with ColorPicker

You can manipulate a ColorPicker control by using methods (or events) of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("colorpicker").getValue();

Related sample: Form. Get Item

List of the control methods:

clear	clears a value of a ColorPicker control
clearValidate	clears validation of a ColorPicker control
disable	disables a ColorPicker control on a page
enable	enables a disabled ColorPicker control
focus	sets focus to a control
getProperties	returns an object with the available configuration attributes of the control
getValue	returns the current value of a ColorPicker control (in the Hex format)
getWidget	returns the dhtmlxColorPicker widget attached to a ColorPicker control
hide	hides a ColorPicker control
isDisabled	checks whether a ColorPicker control is disabled
isVisible	checks whether a ColorPicker control is visible on the page
setProperties	allows changing available configuration attributes of the control dynamically
setValue	sets the value as a string (in the Hex format) for a ColorPicker control
show	shows a ColorPicker control on the page
validate	validates a ColorPicker control

List of the control events:

afterChangeProperties	fires after configuration attributes of the control have been changed dynamically
afterHide	fires after a control is hidden
afterShow	fires after a control is shown
afterValidate	fires after the control value is validated
beforeChangeProperties	fires before configuration attributes of the control are changed dynamically
beforeHide	fires before a control is hidden
beforeShow	fires before a control is shown
beforeValidate	fires before the control value is validated
change	fires on changing the value of a control
input	fires when a user enters the value of a control in the input manually

Working with the dhtmlxColorPicker widget

There is a possibility to use methods of dhtmlxColorPicker via the getWidget() method of a ColorPicker control.

For example, you can set focus on the specified value in the control. To do this, you need to get the widget attached to the ColorPicker control and then use the setFocus() method of this widget.

var colorpicker = form.getItem("colorpicker").getWidget();  // -> ColorPicker
colorpicker.setFocus("#BDF0E9"); // sets focus on the "#BDF0E9" color