Post
Ask Question

Implementing Kendo Color Picker in Kendo UI

The Kendo color picker is a drop-down color picker widget.
 
This widget can be used as a replacement for the browser's built-in color picker widget in HTML 5.
 
This Kendo color picker is supported by most of the browsers.
 
Here is the code with MVVM pattern to implement the Kendo color picker.  
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="utf-8">  
  6.         <title>Untitled</title>  
  7.         <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">  
  8.         <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">  
  9.         <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">  
  10.         <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">  
  11.         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.         <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>  
  13.         <script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>  
  14.         <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>  
  15.     </head>  
  16.   
  17.     <body>  
  18.         <div id="example">  
  19.             <div class="demo-section k-header">  
  20.                 <div>  
  21.                     <h4>Choose a color and click Apply</h4>  
  22.                     <input data-role="colorpicker" data-bind="visible: isVisible,    
  23.                                   enabled: isEnabled,    
  24.                                   value: selectedColor,    
  25.                                   events: { change: onChange }">  
  26.                 </div>  
  27.             </div>  
  28.             <script>  
  29.             var viewModel = kendo.observable({  
  30.                 selectedColor: null,  
  31.                 isVisible: true,  
  32.                 isEnabled: true,  
  33.                 onChange: function() {  
  34.                     alert(this.get("selectedColor"));  
  35.   
  36.                 }  
  37.             });  
  38.             kendo.bind($("#example"), viewModel);  
  39.             </script>  
  40.         </div>  
  41.     </body>  
  42.   
  43. </html> 
Result in the browser:
 
 
I hope you have enjoyed this blog, Thank you.
 
Happy Coding.
Next Recommended Reading Change The Background Color of a Button with JavaScript.