Recently I got chance to explore the new Color Picker control in the ASP.Net AJAX Control Toolkit hence I decided to share my experience.
First you will have to download the latest binary of the AJAX Control Toolkit from CodePlex site. To download click here.
Once that is done you will need to Add Reference of the Ajax Control Toolkit DLL as shown in figure below
Once that is done build the website project and then add this tag to the aspx page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then you will need a textbox which will hold the Hexadecimal value of the color, a Button that will trigger the color picker, a DIV in which we can view preview the colors and a script manager in order to run the ASP.Net AJAX Control Toolkit Controls.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:textbox id="TextBox1" runat="server" Width = "150px"/>
<br />
<div id="preview" style="width:70px;height:70px;border:1px solid #000;margin:0 3px;float:left">
</div>
<asp:Button ID="Button1" runat="server" Text="Choose Color" />
Finally we will add the AJAX Control Toolkit Color Picker Extendor Control
<cc1:colorpickerextender id="ColorPicker1" runat="server"
targetcontrolid="TextBox1"
samplecontrolid="preview"
popupbuttonid="Button1"
PopupPosition ="Right"
OnClientColorSelectionChanged = "Color_Changed"
/>
As you will notice above the properties of the Color Picker
1. targetcontrolid – The Control which will display the hexadecimal color value.
2. samplecontrolid – The Control which will show the preview
3. popupbuttonid – The Control which will trigger the color picker.
4. OnClientColorSelectionChanged – The JavaScript function to be called when the color is changed.
On the OnClientColorSelectionChanged event I am calling Color_Changed JavaScript function which is shown below
<script type = "text/javascript">
function Color_Changed(sender)
{
sender.get_element().value = "#" + sender.get_selectedColor();
}
</script>
The above function adds a Hash (#) as prefix to the color hexadecimal value in the textbox.
That’s all the ASP.Net AJAX Control Toolkit color picker is ready to use. The figure below displays its working
This completes the article. You can download the sample code using the link below.
ColorPicker.zip (709.96 kb)