Change display format

[Dan]

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.

[Aleksandar]

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

[Dan]

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.

[Aleksandar]

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

[Dan]

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)

[Aleksandar]

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

[Dan]

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.

[Aleksandar]

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