Hiding hexadecimal color code in ColorPickerExtender's Sample Control

Hiding hexadecimal color code in ColorPickerExtender’s Sample Control

ASP.net Ajax Control Toolkit Color Picker Extender have a SampleControlID property, that shows the selected color’s hexadecimal color code value for further use. But some time for better ui visibility need, if you don’t want that hexadecimal color code to appear in the same control, then here is the way to do that.

In this sample code below:

I used a TextBox (txtColor) as ColorPickerExtender’s SampleControlID and TargetControlID.
I used a ImageButton(ibtnCollorPicker) with ColorPickerExtender’s PopupButtonID.

Now, when I click on the ibtnCollorPicker, this will show the colorpicker. Any color selection done, will show the hexa value in the txtColor.

Method 1: (Mostly Used By Developers)

On color selection, the selected color of color picker becomes the both the fore color and background color of the textbox. So since the hexa value does not appear directly.

<asp:TextBox ID="txtColor" runat="server"></asp:TextBox>
<asp:ImageButton ID="ibtnCollorPicker" runat="server" ImageUrl="~/Images/color_button.png"
        ToolTip="Pick Color"></asp:ImageButton>
 
<cc:ColorPickerExtender ID="txtColor_ColorPickerExtender" runat="server" 
                        TargetControlID="txtColor" SampleControlID="txtColor" 
                        OnClientColorSelectionChanged="changeColor"
                        PopupButtonID="ibtnCollorPicker">
</cc:ColorPickerExtender>
 

function changeColor(sender)
        {
            sender.get_element().style.color = sender.get_selectedColor();           
 
        }

It works fine but it has a small issue. After selection, if you highlight textbox text with the help of mouse, then the hexa value will appear again.

Method 2 contains solution of this.

Method 2:

We can put textbox data into the hidden field and then clear the textbox data immediately after that. (*hidden field can NOT be assigned as SampleControlID of ColorPickerExtender).

Modified javascript method for doing so is placed below:

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

 function changeColor(sender)
      {
             
          var hidden = document.getElementById('hidColor');
          hidden.value = sender.get_selectedColor()
          sender.get_element().value = "";
 
      }

Sumit Singh , ASP.Net Programmer, Mindfire Solutions.

Author : Sumit Singh

Hiding hexadecimal color code in ColorPickerExtender’s Sample Control

Leave a Reply

Subscribe With Us