CODEWITHSUNDEEP
javascriptjquerykendo-ui
Ultimate Newb
Ultimate Newb

Reputation: 13

KendoUI Colorpicker inline?

I am using the jQuery version of kendoUI and trying to make a colorpicker work. I have gone through the documentation but it seems that there is no way to make the colorpicker work with a custom link. All demos I see, they have (probably the link gets converted to this button) a picker button and dropdown like this: kendo color picker

What I need is a bit different. Let's say I have the following sentence:

lorem ipsum whatever works for this demo click here lorem ipsum.

I want to open the kendo Colorpicker color dialog on clicking the "click here" link. Please note that I don't need a button anywhere in the page. Just need to show the color chooser box on clicking that link, and do something with it (I know there is an event for that. I will do it myself.) once the user chooses a color.

Anybody knows how to do this?

Upvotes: 1

Views: 711

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

I managed to make a workaround for that. It consists on creating a hidden color picker inside the text and opening it as user clicks on the link. Check it out:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
  
  <style type="text/css">
    .colorpicker-container {
      display: inline-block;
    }
  </style>
</head>
<body>
  
  <p>lorem ipsum whatever works for this demo <a href='#' class='colorpicker-link'>click here</a> lorem ipsum.</p>
  
<script>
  $('.colorpicker-link').on('click', function(e) {
      let $wrapper = $('<div class="colorpicker-container"><input type="color" /></div>').insertAfter($(this)),
          colorPicker = $wrapper.find('input').kendoColorPicker({
              change: function(e) {
                  console.log(e.value);
              }
          }).data('kendoColorPicker');
    
      colorPicker.open();
      $wrapper.hide();
  });
</script>
</body>
</html>

Dojo

  • First a wrapper div is created after the clicked link. It contains an input of color type, which kendo's need to create the color picker;

  • Then the kendo color picker is initialized over that input setting up the change event;

  • ColorPicker is manually opened with open() method;

  • The wrapper is hidden. It must be visible before being opened otherwise the color pallete is placed on top-left. Note that the pallete is created outside the wrapper, so hidding the wrapper doesn't affects the pallete itself.

Upvotes: 1

Related Questions