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

[Ruairi]

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

[Ivan Danchev]

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

[Ruairi]

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

[Ivan Danchev]

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

[Ruairi]

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

[Ivan Danchev]

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

[Ruairi]

Hi Ivan,

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

Thanks,

Tyler

[Ivan Danchev]

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