In my page, there are lots of textbox and for each textbox there is a radcolorpicker next to it. I want when use the colorpicker select a color, the color value will be displayed in the textbox.
Is there a simple way to do that?
(There are nearly 100 textbox and colorpicker pair, so it is not a good way to put 100 js function)
Is there a simple way to do that?
(There are nearly 100 textbox and colorpicker pair, so it is not a good way to put 100 js function)
3 Answers, 1 is accepted
0
Hello Jim,
You can achieve the desired functionality by handling the OnClientColorChange event of the color picker in the following way:
You could handle the problem with the large number of colorpickers by adding the pair colorpicker - textbox in a UserControl and add whole UserControls which support the desired functionality on the page.
Let us know if you need further assistance.
All the best,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
You can achieve the desired functionality by handling the OnClientColorChange event of the color picker in the following way:
| <telerik:radcolorpicker id="colorpicker1" runat="server" OnClientColorChange="colorChange"></telerik:radcolorpicker> |
| <asp:textbox id="textbox1" runat="server"></asp:textbox> |
| <script type="text/javascript"> |
| function colorChange(sender, args) |
| { |
| $get("textbox1").value = sender.get_selectedColor(); |
| } |
| </script> |
Let us know if you need further assistance.
All the best,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Jim
Top achievements
Rank 1
Rank 1
answered on 17 Sep 2008, 01:11 AM
Another problem, when I put a RadColorPicker in a userControl. Then put the userControl inside an updatePanel or radAjaxPanel. The colorpicker doesnot work fine.
The main page:
The userControl:
Can you help me to look it and tell me what's wrong in my code?
The main page:
| <%@ Page Language="VB" AutoEventWireup="false" CodeFile="LearnRadColorPicker.aspx.vb" Inherits="LearnRadColorPicker" %> |
| <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> |
| <%@ Register TagPrefix="ucl" TagName="ColorPickerBox" Src="~/FromRadForum/ColorPickerBox.ascx" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <script runat="server"> |
| Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click |
| ColorPickerBox1.Visible = True |
| End Sub |
| Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click |
| ColorPickerBox2.Visible = True |
| End Sub |
| </script> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Learn RadColorPicker</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadStyleSheetManager runat="server"> |
| </telerik:RadStyleSheetManager> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <asp:UpdatePanel runat="server"> |
| <ContentTemplate> |
| <asp:Button runat="server" ID="Button1" Text="click" /> |
| <ucl:ColorPickerBox runat="server" ID="ColorPickerBox1" Visible="false" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| <hr /> |
| <telerik:RadAjaxPanel runat="server"> |
| <asp:Button runat="server" ID="Button2" Text="click" /> |
| <ucl:ColorPickerBox runat="server" ID="ColorPickerBox2" Visible="false" /> |
| </telerik:RadAjaxPanel> |
| </form> |
| </body> |
| </html> |
The userControl:
| <%@ Control Language="VB" AutoEventWireup="false" CodeFile="ColorPickerBox.ascx.vb" Inherits="FromRadForum_ColorPickerBox" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <script runat="server"> |
| Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load |
| colorpicker1.OnClientColorChange = textbox1.ClientID & "_colorChange" |
| End Sub |
| </script> |
| <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> |
| <script type="text/javascript"> |
| function <%=textbox1.ClientID%>_colorChange(sender, args) |
| { |
| $get("<%=textbox1.ClientID%>").value = sender.get_selectedColor(); |
| } |
| </script> |
| </telerik:RadScriptBlock> |
| <asp:textbox id="textbox1" runat="server"></asp:textbox> |
| <telerik:radcolorpicker id="colorpicker1" runat="server" ShowIcon="true"></telerik:radcolorpicker> |
Can you help me to look it and tell me what's wrong in my code?
0
Hi Jim,
Thank you for your feedback. We highly appreciate it.
Regarding the RadAjaxPanel issue we included it in our backlog items list for further consideration and investigation. As soon as we have any progress on the issue, we will contact you again.
With the UpdatePanel scenario you need to register the CSS styles that the RadColorPicker uses in the head of your page, for example:
As far as it is concerned to the problem with the wrong association RadColorPicker - textbox, you can set the ClientID of the corresponding textbox as an attribute of the color picker and get it later from the attributes collection of the color picker when you need it. I have attached a sample UserControl which demonstrates the above suggestion.
Sincerely yours,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Thank you for your feedback. We highly appreciate it.
Regarding the RadAjaxPanel issue we included it in our backlog items list for further consideration and investigation. As soon as we have any progress on the issue, we will contact you again.
With the UpdatePanel scenario you need to register the CSS styles that the RadColorPicker uses in the head of your page, for example:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <link href="../Skins/Default/ColorPicker.Default.css" rel="stylesheet" type="text/css" /> |
| <link href="../Skins/ColorPicker.css" rel="stylesheet" type="text/css" /> |
| </head> |
As far as it is concerned to the problem with the wrong association RadColorPicker - textbox, you can set the ClientID of the corresponding textbox as an attribute of the color picker and get it later from the attributes collection of the color picker when you need it. I have attached a sample UserControl which demonstrates the above suggestion.
Sincerely yours,
Sophy
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.