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

Change display format

7 Answers 213 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Dan asked on 22 Jan 2021, 09:20 AM
Is there a way to change the default format from HEX to RGB? I know that if you use the opacity you get the display value as RGBA but we need not to support opacity but the display format should be RGB.

7 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 26 Jan 2021, 06:37 AM

Hi Dan,

The ColorPicker displays the color format in HEX or RBGA. There is no configuration option available that would allow you to display the colors in RGB format. 

What I can suggest, however, is displaying the colors in RGBA format and hiding the opacity slider, so the opacity cannot be modified:

 .k-flatcolorpicker .k-transparency-slider { 
     display: none; 
    }      

I hope the above suggestion would be useful in your scenario. 

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 26 Jan 2021, 06:42 AM

Hi Aleksandar,

We already did this but the customer does not want RGBA. He want to also get rid of the A in the display. The reason is that we do not want to support colors with a transparency that is not 1.

BTW just hiding the opacity does not mean you can not modify it since the control supports also user input.

0
Aleksandar
Telerik team
answered on 28 Jan 2021, 06:40 AM

Hi Dan,

You are indeed correct, and my suggestion from the previous response would not prevent the user from entering a different value in the widget's input.

Currently, I cannot think of a different approach to display RGB instead of RGBA colors. As this functionality is not available currently I will ask you to consider logging a Feature Request in our Feedback portal on this functionality. Providing as many details as possible on the scenario you have will allow us to access the request more precisely. We will also monitor the community's interest in such functionality and consider it for future implementation.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 28 Jan 2021, 06:51 AM

Hi Aleksandar,

I have created a feature request ColorPicker support of RGB (telerik.com).

But I have an extra question: Is there a way on the close event to know if the user has chosen to select the color or is it from cancel? We tried to attach to the cancel button but the close event is executed before our cancel event so it does not work. (I should mention that we want to cancel the close event in case opacity was selected)

0
Aleksandar
Telerik team
answered on 29 Jan 2021, 01:32 PM

Hello Dan,

You can use the kendo.parseColor method and check if the opacity field (alpha) has a value different than 1. In this case, you can prevent the default action.

close: function(e) {
          if(kendo.parseColor(e.sender.value()).a != 1){
            alert("Please Do Not Change The Opacity")
            e.preventDefault(); 
          }
        }

Here is a runnable example

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 29 Jan 2021, 02:03 PM

Hi Aleksandar,

I already did this but the close function is called also on cancel method so the message appears even if you press cancel button.

0
Aleksandar
Telerik team
answered on 02 Feb 2021, 10:03 AM

Hi Dan,

To figure out which button was clicked during the close event you will have to use event.target to get a reference of the clicked DOM element. Note, however, that by default when clicking cancel the ColorPicker will revert to the previously selected color. In the scenario where you would handle the close event to prevent the change of the opacity it is possible that the user may change the opacity twice to a value different than 1, press the Cancel button, and the ColorPicker will set the previously selected value.

As an alternative, you can consider handling the select instead of the close event. The select event fires as a new color is displayed in the drop-down picker. This way you will be able to prevent the attempt to change the input value. Here is a dojo example.

If it is mandatory to handle the cancel button click event you can attach a click handler to the Cancel button:

$('body').on('click', '.k-controls button.cancel', function(){
        alert('Cancel clicked');
      });

This is also demonstrated in the previously attached dojo.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ColorPicker
Asked by
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Aleksandar
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or