Using Color Picker Extender Control in ASP.Net

Yesterday , I was working on ASP.Net application. I want to use ColorPickerExtender Control in my application so that user can set background color of the web page according to his/her own choice. I extend my TextBox Control with ColorPickerExtender Control and set its target Control Id to the id of the TextBox Control.But when I set background property of the web page to the value of textbox then I found that data type of textbox value did not matched with the datatype of the background property of the web page. Because first one return String where last one need Color type value.

Now, my problem was how to convert the String data type to Color data type. After extensive research ,I found that I can create a class inherit from Iconverter and then write a code to convert String data type to Color type. Also, I found one another short alternative method to solve the above problem and that was ColorPickerExtender Control has SampleControlID property .

We can set this property to the ID of the Control on which  we want to perform operation.Like ID of the Panel , label ,Textbox and so on and ColorPickerExtender Control automatically change the Back Color of that control as I did in this code:

 

<asp:Table ID="Table1" runat="server"><asp:TableRow>

<asp:Panel ID="Panel2" runat="server">
</asp:Label><asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox><asp:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="TextBox1" SampleControlID="Panel1"></asp:ColorPickerExtender></asp:Panel></asp:TableCell>
</asp:Table></asp:TableRow><asp:Label ID="Label1" runat="server" Text="Select a Color" Font-Bold="True"><asp:TableCell>

 

In the above code,note the shaded portion which contain the ColorPickerExtender Control  with TargetControlID and SampleControlID property.I set TargetControlID to the TextBox1 which extend the TextBox Control and SampleControlId to Panel1 which was the id of the Panel in which whole web page contained.

 

When a user select a color from ColorPickerExtender Control then backcolor of panel1 will automatically change with respect to the selected color.