Custom dropdown with color picker

[eyal]

Hi,

I would like to add a custom dropdown button to change the background color of the editor's content area. Functionality of the dropdown button should be similar to ForeColor and BackColor buttons, ie displaying the same built-in color picker. Once color is selected, I will set the content-area background color as demonstrated here.

How can I show the built-in color picker and catch the event once color is selected?

Thanks in advance for any assistance!

br,
eyal

[Rumen]

Hi Eyal,

You can implement a custom dropdown using as a base the solution provided in this KB article: Integrating RadTreeView in a custom dropdown of RadEditor v5.x - v7.x, "Prometheus". Instead of RadTreeview however you should put RadColorPicker. After that you need to attach a function to the OnClientColorChange event of RadColorPicker, which is raised when the selected color of the color picker changes. In this function execute


 function OnClientColorChange(sender, eventArgs)
        {
var editor = $find("RadEditor1");
var style = editor.get_contentArea().style.backroundColor = sender.get_selectedColor());
        }

Regards,
Rumen
the Telerik team

[eyal]

Thanks a lot Rumen!

It works fine with few glitches:
1. The color picker, or actually the div that wraps it, is not kept within screen bounds.
2. The oPopupHandler function (to hide the wrapper div) is fired when you click on the document, but not if you click on the editor - tool buttons or the content area (in FF). This behavior is different from other dropdown tools (eg. ForeColor, BackColor), in which the popup is closed on every click.
3. I currently use dll version 2010.1.309.35, where the custom color feature was not yet implemented to the color picker.

Last, for the sake of consistency, it would be great if you could suggest a way to neatly implement the same functionality as in ForeColor/BackColor popups.

br,
eyal

[eyal]

Hi Rumen,

Continuing with this implementation, I found an issue concerning Safari and Chrome.
The color picker is set with PaletteModes="HSV". Safari and Chrome does not show the slider (see attached image). Though, if I set PaletteModes="All", these browsers do show the slider (our clients certainly do not need all the palettes).

Here is the markup for the color picker and wrapper:

<div onclick="return cancelEvent(event)" id="divColorPicker" style="display: none; z-index: 101; background: white; border:solid 0px #828282; position: absolute; overflow:auto;">
                                        <telerik:RadColorPicker ID="colorPickerBG" runat="server" ShowEmptyColor="false" Localization-ApplyButtonText="OK" Width="200px" PaletteModes="HSV" OnClientColorChange="onClientColorChange" OnClientColorPreview="onClientColorPreview"></telerik:RadColorPicker>
                                    </div>

Any suggestions..

Thanks!
eyal