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

1. Retrieve the selected color in the select event handler of the DropDownList.

2. 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>