RadColorPicker bind with a textbox

4 posts, 0 answers
  1. Jim
    Jim avatar
    4 posts
    Member since:
    Sep 2008

    Posted 15 Sep 2008 Link to this post

    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)
  2. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 15 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jim
    Jim avatar
    4 posts
    Member since:
    Sep 2008

    Posted 16 Sep 2008 Link to this post

    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?
  5. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 19 Sep 2008 Link to this post

    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.
Back to Top