Get selected Color Value from Color Picker

[Nazia]

Hi All,
I am using Kendo UI ColorPicker...In the samples provided, I am using Keyboard support HSV Picker.
How to get the selected color value ???
Like I need to assign the selected color as a background color to a div...
How to achieve this???

[Dimiter Madjarov]

Hello Nazia,


You could use the value method of the ColorPicker API to get (or set) the value of the widget. This is demonstrated in the ColorPicker API Demo. When you have retrieved the color, you could use jQuery to set it as a background color.

I hope that this information was helpful for you. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Nazia]

Thanks for the response.
I am able to get the color if I use Basic Color Picker (Choose custom color) from  http://demos.kendoui.com/web/colorpicker/index.html. But I would like to know how to get the color value similar as above in case of Keyboard Supported color Picker . I am using HSV Picker from http://demos.kendoui.com/web/colorpicker/navigation.html and I am not sure how to get the Color Picker selected value...
Please let me know the approach to achieve this value.
I am using like this

<div id="example" class="k-content">
      <div class="demo-section">
           <label for="hsv">HSV picker:</label>
           <input type="color" id="hsv" value="#00ccff" accesskey="h" data-role="colorpicker" data-opacity="true" />
      </div>
 </div>
 <button id="get" class="k-button">Get value</button>

<script>
 kendo.init($("#example"));

 $("#get").click(function () {
      alert(selected color value');//how to get this value???
 });
</script>

Please let me know how to show the selected color when I click get button?

[Nazia]

I was able to get the color after referring the sample demo (Dimiter mentioned)
Here is the approach to get the selected color...

$("#hsv").each(function () {

           var colorPicker = $(this).data("kendoColorPicker");

           var selectedColor;

           colorPicker.bind({

               select: function (e) {

               selectedColor = e.value;

               },

               close: function () {

                   alert("Select color is" + selectedColor);

               }

           });

       });

Thanks Dimiter for pointing me to the right direction