I have added some custom colors declaratively using the <telerik:EditorColor> tag. However when i view the color pallet it displays the hexadecimal value (#ACD9F4) for the color as opposed to displaying the title (Light Blue). How do i get the title displayed instead?
<telerik:EditorColor Title="Light Blue" Value="#ACD9F4" />
Thanks
5 Answers, 1 is accepted
0
Hi David,
To ensure fast loading, the RadEditor has been optimized in all possible ways and respects. One of the choices made when dealing with colors is to send just the values to reduce the array size by half (logic being that users will pick up a color on the basis of what they see rather than based on its name).
So, my suggestion would be to simply use the following syntax:
<Colors>
<telerik:EditorColor Value="LightBlue" />
</Colors>
If this is not a good enough solution for your scenario, there is indeed a way to make the color titles different than the values, but it requires some extra efforts and some code. In case you would be interested to get this solution please let us know.
Best regards,
Tervel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
To ensure fast loading, the RadEditor has been optimized in all possible ways and respects. One of the choices made when dealing with colors is to send just the values to reduce the array size by half (logic being that users will pick up a color on the basis of what they see rather than based on its name).
So, my suggestion would be to simply use the following syntax:
<Colors>
<telerik:EditorColor Value="LightBlue" />
</Colors>
If this is not a good enough solution for your scenario, there is indeed a way to make the color titles different than the values, but it requires some extra efforts and some code. In case you would be interested to get this solution please let us know.
Best regards,
Tervel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Dan
Top achievements
Rank 1
Rank 1
answered on 25 May 2009, 05:23 PM
I would be interested in the code to assign custom color titles. Can you please forward to me?
I was also wondering if there is any way to have a separate color palette for the forecolor and fill (backcolor) dropdowns?
Thanks.
Dan
I was also wondering if there is any way to have a separate color palette for the forecolor and fill (backcolor) dropdowns?
Thanks.
Dan
0
Hi Dan,
I have attached a sample page demonstrating how to override some methods of the color picker tool of the editor to allow for changing the string that appears in the color tooltips.
Kind regards,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I have attached a sample page demonstrating how to override some methods of the color picker tool of the editor to allow for changing the string that appears in the color tooltips.
Kind regards,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Dan
Top achievements
Rank 1
Rank 1
answered on 28 May 2009, 05:21 PM
Thank you Rumen.
Can you answer my other question about separate color palettes for forecolor and backcolor?
Dan
Can you answer my other question about separate color palettes for forecolor and backcolor?
Dan
0
Hi Dan,
You can implement two custom dropdowns to achieve your goal. Here is an example based on the following live demo: Custom Dropdowns:
Best wishes,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You can implement two custom dropdowns to achieve your goal. Here is an example based on the following live demo: Custom Dropdowns:
| <%@ Page AutoEventWireup="false" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head id="Head1" runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .CustomForeColor |
| { |
| background:url(http://demos.telerik.com/aspnet-classic/RadControls/Editor/Skins/Default/buttons/ForeColor.gif) !important; |
| } |
| .CustomBackColor |
| { |
| background:url(http://demos.telerik.com/aspnet-classic/RadControls/Editor/Skins/Default/buttons/BackColor.gif) !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager> |
| <script type="text/javascript"> |
| function OnClientCommandExecuting(editor, args) |
| { |
| if (!args || !args.get_commandName) return; |
| var name = args.get_commandName(); //The command name |
| var val = args.get_value(); //The tool that initiated the command |
| if (name == "CustomForeColor") |
| { |
| editor.fire("ForeColor", {value: val}); |
| } |
| else if (name == "CustomBackColor") |
| { |
| editor.fire("BackColor", {value: val}); |
| } |
| //Cancel the further execution of the command |
| args.set_cancel(true); |
| } |
| </script> |
| <telerik:RadEditor ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" runat="server"> |
| <Tools> |
| <telerik:EditorToolGroup> |
| <telerik:EditorSplitButton Name="CustomForeColor" Text="Fore Color" ItemsPerRow="3" PopupWidth="100px" PopupHeight="100px"> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: red;'/>" value="red" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: green;'/>" value="green" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: blue;'/>" value="blue" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #d8d8d8;'/>" value="#d8d8d8" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #bfbfbf;'/>" value="#bfbfbf" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #a5a5a5;'/>" value="a5a5a5" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #ffc000;'/>" value="#ffc000" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: yellow;'/>" value="yellow" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: pink;'/>" value="pink" /> |
| </telerik:EditorSplitButton> |
| <telerik:EditorSplitButton Name="CustomBackColor" Text="Back Color" ItemsPerRow="3" PopupWidth="100px" PopupHeight="100px"> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: black;'/>" value="black" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: darkblue;'/>" value="darkblue" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: magenta;'/>" value="magenta" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #d8d8d8;'/>" value="#d8d8d8" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #bfbfbf;'/>" value="#bfbfbf" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #a5a5a5;'/>" value="a5a5a5" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: #ffc000;'/>" value="#ffc000" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: yellow;'/>" value="yellow" /> |
| <telerik:EditorDropDownItem Name ="<div style='width:22px;height:22px;background-color: pink;'/>" value="pink" /> |
| </telerik:EditorSplitButton> |
| </telerik:EditorToolGroup> |
| </Tools> |
| </telerik:RadEditor> |
| </div> |
| </form> |
| </body> |
| </html> |
Best wishes,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.