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"
<cc:ColorPickerExtender ID="txtColor_ColorPickerExtender" runat="server"
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.
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).
<asp:HiddenField runat="server" ID="hidColor" />
var hidden = document.getElementById('hidColor');
hidden.value = sender.get_selectedColor()
sender.get_element().value = "";