This is a migrated thread and some comments may be shown as answers.

Get selected Color Value from Color Picker

3 Answers 203 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Nazia
Top achievements
Rank 1
Nazia asked on 10 Jul 2013, 09:45 AM
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???

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 11 Jul 2013, 06:55 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nazia
Top achievements
Rank 1
answered on 11 Jul 2013, 09:15 AM
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?


0
Accepted
Nazia
Top achievements
Rank 1
answered on 11 Jul 2013, 09:33 AM
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
Tags
ColorPicker
Asked by
Nazia
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Nazia
Top achievements
Rank 1
Share this question
or