<kendo:colorPicker>
A JSP wrapper for Kendo UI ColorPicker.
Configuration Attributes
buttons boolean
Specifies whether the widget should display the Apply / Cancel buttons.
Example
<kendo:colorPicker buttons="buttons">
</kendo:colorPicker>
closeOnSelect boolean
Specifies whether selection of a color in the palette view closes the popup. Applied only when buttons are set to false and the currently selected view is palette.
Example
<kendo:colorPicker closeOnSelect="closeOnSelect">
</kendo:colorPicker>
columns float
The number of columns to show in the color dropdown when a pallete is specified. This is automatically initialized for the "basic" and "websafe" palettes. If you use a custom palette then you can set this to some value that makes sense for your colors.
Example
<kendo:colorPicker columns="columns">
</kendo:colorPicker>
contrastTool boolean
Enables the contrast tool in the ColorGradient. Further configuration is available via kendo:colorPicker-contrastTool.
Example
<kendo:colorPicker contrastTool="contrastTool">
</kendo:colorPicker>
fillMode java.lang.String
Sets a value controlling how the color is applied.
Example
<kendo:colorPicker fillMode="fillMode">
</kendo:colorPicker>
format java.lang.String
Defines the format of the gradient input editor
Example
<kendo:colorPicker format="format">
</kendo:colorPicker>
formats java.lang.Object
Sets the available input formats in the gradient input editor. Only "hex" and "rgb" are valid values.
Example
<kendo:colorPicker formats="formats">
</kendo:colorPicker>
input boolean
Whether to render the input in the ColorGradient component.
Example
<kendo:colorPicker input="input">
</kendo:colorPicker>
opacity boolean
Only for the HSV selector. If true, the widget will display the opacity slider. Note that currently in HTML5 the does not support opacity.
Example
<kendo:colorPicker opacity="opacity">
</kendo:colorPicker>
palette java.lang.String
Defines the palettes that can be used in the color picker
Example
<kendo:colorPicker palette="palette">
</kendo:colorPicker>
preview boolean
Displays the color preview element and the previously selected color for comparison. With buttons set to false, both elements will update at the same time.
Example
<kendo:colorPicker preview="preview">
</kendo:colorPicker>
rounded java.lang.String
Sets a value controlling the border radius.
Example
<kendo:colorPicker rounded="rounded">
</kendo:colorPicker>
size java.lang.String
Sets the size of the component.
Example
<kendo:colorPicker size="size">
</kendo:colorPicker>
tileSize float
The size of a color cell. Further configuration is available via kendo:colorPicker-tileSize.
Example
<kendo:colorPicker tileSize="tileSize">
</kendo:colorPicker>
toolIcon java.lang.String
A CSS class name to display an icon in the color picker button. If specified, the HTML for the element will look like this:
Example
<kendo:colorPicker toolIcon="toolIcon">
</kendo:colorPicker>
value java.lang.Object
The initially selected color. Note that when initializing the widget from an element, the initial color will be decided by the field instead.
Example
<kendo:colorPicker value="value">
</kendo:colorPicker>
view java.lang.String
Defines the initially selected view in the ColorPicker.
Example
<kendo:colorPicker view="view">
</kendo:colorPicker>
views java.lang.Object
The available views in the FlatColorPicker. Valid values are "gradient" and "palette".
Example
<kendo:colorPicker views="views">
</kendo:colorPicker>
Configuration JSP Tags
kendo:colorPicker-contrastTool
Enables the contrast tool in the ColorGradient.
More documentation is available at kendo:colorPicker-contrastTool.
Example
<kendo:colorPicker>
<kendo:colorPicker-contrastTool></kendo:colorPicker-contrastTool>
</kendo:colorPicker>
kendo:colorPicker-messages
Allows localization of the strings that are used in the widget.
More documentation is available at kendo:colorPicker-messages.
Example
<kendo:colorPicker>
<kendo:colorPicker-messages></kendo:colorPicker-messages>
</kendo:colorPicker>
kendo:colorPicker-tileSize
The size of a color cell.
More documentation is available at kendo:colorPicker-tileSize.
Example
<kendo:colorPicker>
<kendo:colorPicker-tileSize></kendo:colorPicker-tileSize>
</kendo:colorPicker>
Event Attributes
change String
Fires when a color was selected, either by clicking on it (in the simple picker), by clicking ENTER or by pressing "Apply" in the HSV picker.
For additional information check the change event documentation.
Example
<kendo:colorPicker change="handle_change">
</kendo:colorPicker>
<script>
function handle_change(e) {
// Code to handle the change event.
}
</script>
select String
Fires as a new color is displayed in the drop-down picker. This is not necessarily the "final" value; for example this event triggers when the sliders in the HSV selector are dragged, but then pressing ESC would cancel the selection and the color will revert to the original value.
For additional information check the select event documentation.
Example
<kendo:colorPicker select="handle_select">
</kendo:colorPicker>
<script>
function handle_select(e) {
// Code to handle the select event.
}
</script>
open String
Fires when the picker popup is opening.
For additional information check the open event documentation.
Example
<kendo:colorPicker open="handle_open">
</kendo:colorPicker>
<script>
function handle_open(e) {
// Code to handle the open event.
}
</script>
close String
Fires when the picker popup is closing.
For additional information check the close event documentation.
Example
<kendo:colorPicker close="handle_close">
</kendo:colorPicker>
<script>
function handle_close(e) {
// Code to handle the close event.
}
</script>
Event Tags
kendo:colorPicker-change
Fires when a color was selected, either by clicking on it (in the simple picker), by clicking ENTER or by pressing "Apply" in the HSV picker.
For additional information check the change event documentation.
Example
<kendo:colorPicker>
<kendo:colorPicker-change>
<script>
function(e) {
// Code to handle the change event.
}
</script>
</kendo:colorPicker-change>
</kendo:colorPicker>
kendo:colorPicker-select
Fires as a new color is displayed in the drop-down picker. This is not necessarily the "final" value; for example this event triggers when the sliders in the HSV selector are dragged, but then pressing ESC would cancel the selection and the color will revert to the original value.
For additional information check the select event documentation.
Example
<kendo:colorPicker>
<kendo:colorPicker-select>
<script>
function(e) {
// Code to handle the select event.
}
</script>
</kendo:colorPicker-select>
</kendo:colorPicker>
kendo:colorPicker-open
Fires when the picker popup is opening.
For additional information check the open event documentation.
Example
<kendo:colorPicker>
<kendo:colorPicker-open>
<script>
function(e) {
// Code to handle the open event.
}
</script>
</kendo:colorPicker-open>
</kendo:colorPicker>
kendo:colorPicker-close
Fires when the picker popup is closing.
For additional information check the close event documentation.
Example
<kendo:colorPicker>
<kendo:colorPicker-close>
<script>
function(e) {
// Code to handle the close event.
}
</script>
</kendo:colorPicker-close>
</kendo:colorPicker>