ColorPicker

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

Related sample:  All dhxForm inputs - DHTMLX Form

Adding ColorPicker

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

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "colorpicker",
            labelInline: true,
            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"
• 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
• icon - (string) the name of an icon from the used icon font
• placeholder - (string) a tip for the input
• editing - (boolean) allows a user to enter the value of the control manually
  
  
• parent - (string) the id of the parent control
• width - (string) the width of a control
• height - (string) the height of a control
• css - (string) adds style classes to a control
• disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
• label - (string) specifies a label for a control
• labelWidth - (string) 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
• labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
• name - (string) the name of a control
• required - (boolean) defines whether a control is required
• help - (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
• gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
  
  
• css - (string) adds custom CSS classes to ColorPicker
• 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
• 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

Working with ColorPicker

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

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

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

Related sample:  Get item - DHTMLX Form

List of the control methods:

• clear() - clears a value of a ColorPicker control
• clearValidate() - clears validation of a ColorPicker control
• getValue(): boolean - returns the current boolean value of a ColorPicker control
• getWidget(): object - returns the dhtmlxColorPicker widget attached to a ColorPicker control
• setValue(value: string) - sets the value as a string (in the Hex format) for a ColorPicker control
• setConfig(config: object) - sets a new configuration for a ColorPicker control
• validate(): boolean - validates a ColorPicker control. Returns the result of validation: true, if a control is valid, otherwise - false

Working with the widget of ColorPicker control

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 focusValue() method of this widget.

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

Related sample:  Get widget of control - DHTMLX Form

Setting configuration of ColorPicker control

It is possible to update the configuration of a ColorPicker control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

form.getItem("colorpicker_id").setConfig({
    labelInline: true,
    label: "Choose your color",
    required: true,
    labelWidth: "130px",
});

Back to top