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

Custom dropdown with color picker

3 Answers 147 Views
Editor
This is a migrated thread and some comments may be shown as answers.
eyal
Top achievements
Rank 1
eyal asked on 17 Aug 2010, 08:23 AM
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

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 17 Aug 2010, 09:58 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
eyal
Top achievements
Rank 1
answered on 17 Aug 2010, 12:48 PM
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
0
eyal
Top achievements
Rank 1
answered on 18 Aug 2010, 08:26 AM
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
Tags
Editor
Asked by
eyal
Top achievements
Rank 1
Answers by
Rumen
Telerik team
eyal
Top achievements
Rank 1
Share this question
or