Kendo UI for jQuery ColorPalette Overview
The Kendo UI for jQuery ColorPalette renders colors by using color presets (sets of predefined colors) or by implementing a custom color palette.
The ColorPalette is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Configuration
To initialize the ColorPalette, use a div element. The following example shows a basic configuration of the ColorPalette widget:
<div id="colorpalette"></div>
<script>
$(document).ready(function(){
$("#colorpalette").kendoColorPalette();
});
</script>
As of Kendo UI R3 2022, you can initialize the ColorGradient from an input element and use it for value submission. The widget is also supported as an editor in the Kendo Form.
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: 3,
Color: "red"
},
items: [
{
field: "Name",
validation: { required: true }
},
{
field: "Address",
editor:"DropDownList",
editorOptions:{
dataTextField:"text",
dataValueField:"id",
dataSource: {
data: [
{text:"Sofia", id:1},
{text:"London", id:2},
{text:"New York", id:3}
]
}
}
},
{
field: "Color",
editor:"ColorPalette"
}
]
});
</script>
Functionality and Features
- Color Presets—The widget provides a set of predefined color palettes.
- Accessibility—The ColorPalette supports various accessibility standards.
Next Steps
- Getting Started with the Kendo UI ColorPalette for jQuery
- Basic Usage of the ColorPalette (Demo)
- JavaScript API Reference of the ColorPalette