Get selected Color Value from Color Picker

4 posts, 2 answers
  1. Nazia
    Nazia avatar
    35 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2013 Link to this post

    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???
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 11 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Nazia
    Nazia avatar
    35 posts
    Member since:
    Jul 2012

    Posted 11 Jul 2013 Link to this post

    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?


  5. Answer
    Nazia
    Nazia avatar
    35 posts
    Member since:
    Jul 2012

    Posted 11 Jul 2013 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready