Catching the apply on the ColorPicker when a color hasn't been changed

8 posts, 0 answers
  1. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 30 May 2019 Link to this post

    Hi,

    I've created a custom tool for my Kendo Editor control. It's a paragraph background color (as opposed to the back color control that only put the background around a span). I've got this more or less done however I've came across a limitation on the HSV color picker. If I pick a color such as red and hit apply this fires the change event which I can then use to set a paragraph I'm currently highlighting to however if I want to make another paragraph the same color by clicking on the colorPicker and clicking apply the change event doesn't fire. It seems I need to change the color every time in order for this event to be fired.

    So I was wondering if there was anyway to catch the apply event when the color hasn't changed?

    Cheers,

    Tyler

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1951 posts

    Posted 03 Jun 2019 Link to this post

    Hi Tyler,

    Here's a dojo example, which shows how you can attach a click handler to the Apply button in the ColorPicker in its open event handler and detach it in the close event handler. You can use the click handler instead of the change event, since change will fire only if a different color is selected.

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 04 Jun 2019 Link to this post

    Hi Ivan,

    That works great for what I need the custom color picker that I've created, is there any way of applying this same code to the built in font color and background color tools as the apply doesn't work?

    I've also noticed that in the color picker picker the user doesn't have to click on the arrow to open the color picker. I'm trying to make all the color related buttons/ tool act and feel the same so the user doesn't know the difference and in the font and background color selector if they must hit the arrow to open the selection process and the button to the left of the arrow applies the color that is currently selected.

    Are all of these doable?

    Thanks,
    Tyler

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1951 posts

    Posted 06 Jun 2019 Link to this post

    Hi Tyler,

    The foreColor and backColor tools do not open a popup with an Apply button in it, thus if you want to detect a color selection in these tools you can use a different approach:
    $(document).ready(function() {
      $(".k-colorpalette .k-item").click(function() {
        console.log("color selected");
      })
    });

    As for opening the color palette when the left section (the one that displays the icon) of the tools is clicked, although not achievable through configuration, it is possible with jQuery:
    $(document).ready(function() {
      $(".k-picker-wrap .k-icon").click(function() {
        var that = this;
        setTimeout(function() {
          console.log($(that).next());
            $(that).next().click();
        }, 0);
      });
    });

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 12 Jun 2019 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    The Apply button on the foreColor and backColor can be seen in the attached png, I just need a way of catching the apply and then simulating the click of the icon. I tried accessing the open event in the fontColor and backColor tools but I couldn't get this to work. 

    I managed to get the custom color picker behaving how I wanted so thanks for this.

    Cheers,
    Tyler

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1951 posts

    Posted 14 Jun 2019 Link to this post

    Hi Tyler,

    By default the Editor's foreColor and backColor tools use color palette and do not display an apply button: dojo example. Could you demonstrate you Editor configuration?

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 14 Jun 2019 Link to this post

    Hi Ivan,

    Please see the dojo example to see what I mean, https://dojo.telerik.com/iruzUxEX

    Thanks,

    Tyler

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1951 posts

    Posted 18 Jun 2019 Link to this post

    Hi Tyler,

    Here's the modified dojo, which shows how to catch the apply button in the default tools with disabled palette and how to to open the dropdown when clicking the icons.

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top