An input with a color picker attached to it for selecting a color.
Related sample: Form. All DhxForm Inputs
Related sample: Form. 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"
}
]
});
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 |
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
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 |
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 |
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
Related sample: Form. Get Widget Of Control
Back to top