ColorPicker

Directive

kendo-colorpicker

Props

buttons Boolean

Specifies whether the ColorPicker will display the Apply and Cancel buttons (buttons in Kendo UI for jQuery). Applicable only for the HSV selector when a palette is not specified.

clear-button Boolean

Specifies whether the ColorPicker will display the Clear color button (clearButton in Kendo UI for jQuery). Applicable only for the HSV selector when a palette is not specified.

columns Number

The number of columns that will be displayed in the color drop-down when a palette is specified (columns in Kendo UI for jQuery). columns is automatically initialized for the basic and web-safe palettes. If you use a custom palette, then you can set columns to a value that indicates your colors.

tile-size Number | Object

The size of a color cell (tileSize in Kendo UI for jQuery). The supported composite props are available in TileSizeProps.

messages Object

Allows the localization of the strings that are used in the ColorPicker (messages in Kendo UI for jQuery). The supported composite props are available in MessagesProps.

palette String | Array

When palette receives an argument different from null, the drop-down will be a simple ColorPicker that lists the colors (palette in Kendo UI for jQuery).

The supported values are:

• basic—Displays 20 basic colors.
• websafe—Displays the web-safe color palette.
• A string with colors in HEX representation that are separated with commas&mdashh;Displays a palette.
• An array of colors&mdashh;Displays a palette. The passed array can contain strings that are supported by parseColor or color objects.

If palette is missing or is null, the ColorPicker will display the HSV selector.

opacity Boolean

(Applicable only for the HSV selector) If opacity is set to true, the ColorPicker will display the opacity slider (opacity in Kendo UI for jQuery).

Currently, <input type=color> in HTML5 does not support opacity.

preview Boolean

(Applicable only for the HSV selector) Displays the color preview element along with an input field where the user can paste a color in a CSS-supported notation (preview in Kendo UI for jQuery).

tool-icon String

A CSS class name that will display an icon in the ColorPicker button (toolIcon in Kendo UI for jQuery).

value String

The initially selected color (value in Kendo UI for jQuery).

When the ColorPicker is initialized from an <input> element, the initial color will be decided by the field instead.

Events

change: Function

Fires when a color was selected by clicking the color itself in the simple ColorPicker, or the Enter, or the Apply button in the HSV picker (change in Kendo UI for jQuery.

select: Function

Fires as a new color is displayed in the drop-down picker (select in Kendo UI for jQuery. The value can be different from final—for example, select is triggered when the sliders in the HSV selector are dragged. However, pressing the Esc key cancels the selection and the color will revert to the original value.

open: Function

Fires when the ColorPicker popup is opening (open in Kendo UI for jQuery.

close: Function

Fires when the ColorPicker popup is closing (close in Kendo UI for jQuery.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI ColorPicker instance.