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

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

7 Answers 55 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Ruairi
Top achievements
Rank 1
Ruairi asked on 30 May 2019, 03:55 PM

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

7 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 03 Jun 2019, 02:29 PM
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.
0
Ruairi
Top achievements
Rank 1
answered on 04 Jun 2019, 03:08 PM

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

0
Ivan Danchev
Telerik team
answered on 06 Jun 2019, 12:20 PM
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.
0
Ruairi
Top achievements
Rank 1
answered on 12 Jun 2019, 09:36 AM

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

0
Ivan Danchev
Telerik team
answered on 14 Jun 2019, 10:28 AM
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.
0
Ruairi
Top achievements
Rank 1
answered on 14 Jun 2019, 11:07 AM

Hi Ivan,

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

Thanks,

Tyler

0
Ivan Danchev
Telerik team
answered on 18 Jun 2019, 09:01 AM
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.
Tags
ColorPicker
Asked by
Ruairi
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Ruairi
Top achievements
Rank 1
Share this question
or