ansaurus

Question

Hide Textbox Targeted by the ColorPickerExtender

Answer 1

+2 A:

While I didn't hide it, I did find another way to get what I wanted. When the color is selected I call a javascript function that gets the color code from the textbox and stores it in a hidden field, then clears the textbox's text, then finally sets the background color of the textbox to the color that was selected.

Here is the aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="color.aspx.cs" Inherits="color" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function ColorSelectionChanged() {
        var txtColorPickerSelector = '#' + txtColorPickerID;
        var ColorCodeSelector = '#' + ColorCodeID;
        var colorCode = '#' + $(txtColorPickerSelector).val();
        $(txtColorPickerSelector).val('').css('background-color', colorCode);
        $(ColorCodeSelector).val(colorCode);
    }        
</script>

</head>
<body>
<form id="form1" runat="server">

<asp:HiddenField ID="ColorCode" runat="server" />

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:TextBox ID="txtColorPicker" runat="server" Width="2em"></asp:TextBox>

<cc1:ColorPickerExtender ID="txtColor_ColorPickerExtender" runat="server" 
    TargetControlID="txtColorPicker"
    OnClientColorSelectionChanged="ColorSelectionChanged" />

&nbsp;<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />

<asp:Label ID="lblColorCode" runat="server"></asp:Label>
</form>
</body>
</html>

<script type="text/javascript">
    var txtColorPickerID = '<%=txtColorPicker.ClientID %>';
    var ColorCodeID = '<%=ColorCode.ClientID %>';    
</script>

And the code behind:

using System;
using System.Drawing;

public partial class color : System.Web.UI.Page
{
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblColorCode.Text = ColorCode.Value;
        txtColorPicker.BackColor = ColorTranslator.FromHtml(ColorCode.Value);
    }
}

I just assign the code to the label to prove that color code is being submitted. Sorry for the aspx formatting. Tested and working in Chrome, IE 6, IE 7, Firefox 3, Opera 9, and Safari 4.

Ronnie Overby 2009-05-28 17:43:53

This solution does works, but I am facing one problem. In the initial stage it shows Hexa code. Please help me to resolve this.

Vijay Balkawade 2010-07-29 12:34:16

Answer 2

A:

The previous code is a bit a mess. I changed it a bit to make it clearer.

function ColorSelectionChanged() {
   $get('<%=ColorCode.ClientID %>').value = '#' + $get('<%=txtColorPicker.ClientID %>').value
   $get('<%=txtColorPicker.ClientID %>').value=''
   $get('<%=txtMessage.ClientID %>').style.color = $get('<%=ColorCode.ClientID %>').value
}

and the html part

<asp:ImageButton ID="ImageColor" runat="server" ImageUrl="~/_Images/cp_button.png" />
                       <asp:TextBox ID="txtColorPicker" runat="server" width="0" style="border:0;" />
                       <asp:HiddenField ID="ColorCode" runat="server" />
                       <ajaxToolkit:ColorPickerExtender 
                            ID="ColorPickerExtender1"
                            PopupButtonID="ImageColor"
                            TargetControlID="txtColorPicker"
                            PopupPosition="Right"
                            OnClientColorSelectionChanged="ColorSelectionChanged"
                            runat="server"
                            />

where txtMessage is the texbox they are going to write on (imagine a chat textbox). You can comment that line if you dont need it

Form the code behind just use ColorCode.value to retrive the color code selected.

2009-06-14 01:33:36

Where in you code does the javascript function ColorSelectionChanged reside? If I ever try to do a <%=ServerControl.ClientID %> inside the head tag of an aspx page, I get some error about adding controls or something.

Ronnie Overby 2009-06-15 13:01:23

ansaurus

tags:

views:

answers:

Hide Textbox Targeted by the ColorPickerExtender

related questions