Set the Color of the ColorPicker with a DropDownList
Environment
Product | Progress® Kendo UI® ColorPicker for jQuery |
Operating System | All |
Browser | All |
Preferred Language | JavaScript |
Description
How can I add or change the color in the ColorPicker from a DropDownList?
Solution
Retrieve the selected color in the
select
event handler of the DropDownList.Set the color to the reference of the ColorPicker widget.
<label for="colorpicker">ColorPicker:</label>
<input id="colorpicker" value="#1212d3" />
<div id="dropdown"></div>
<script>
var ddlData = [
{ Name: "Blue", Color: '#1212d3' },
{ Name: "Green", Color: '#22d312' },
{ Name: "Red", Color: '#ff0000' }
];
$('#dropdown').kendoDropDownList({
dataSource:ddlData,
dataTextField: "Name",
dataValueField: "Color",
template: '<div style="background-color: #: Color # !important">#: Name # </div>',
select:onSelect
});
function onSelect(e){
var item = e.item;
var dataItem = this.dataItem(e.item);
var colorCode = dataItem.Color
setColor(colorCode);
}
var colorpicker = $("#colorpicker").kendoColorPicker().data("kendoColorPicker");
function setColor(color){
try {
var color = kendo.parseColor(color);
colorpicker.value(color);
} catch(ex) {
alert('Cannot parse color: "' + color + '"');
}
}
</script>