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

RadColorPicker bind with a textbox

3 Answers 151 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Jim
Top achievements
Rank 1
Jim asked on 15 Sep 2008, 07:28 AM
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)

3 Answers, 1 is accepted

Sort by
0
Sophy
Telerik team
answered on 15 Sep 2008, 03:50 PM
Hello Jim,

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> 
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.
0
Jim
Top achievements
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:
<%@ 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
Sophy
Telerik team
answered on 19 Sep 2008, 03:20 PM
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:
<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.
Tags
ColorPicker
Asked by
Jim
Top achievements
Rank 1
Answers by
Sophy
Telerik team
Jim
Top achievements
Rank 1
Share this question
or