AJAX ColorPickerExtender

The AJAX ColorPickerExtender provides client-side color-picking functionality with a UI in a popup control. It can be attached to any ASP.NET TextBox control.
Properties of AJAX ColorPickerExtender
  • targetcontrolid: It is used for the TextBox Control that will display the hexadecimal color value.

  • samplecontrolid: It is used for the Control that will show the preview of the selected color.

  • PopupButtonID: It is used for the ID of a control to show the ColorPicker popup when clicked.

  • PopupPosition: It indicates where the color picker popup appears, like at the BottomLeft (default).

  • BottomRight, TopLeft, TopRight,Left or Right of the TextBox.

  • OnClientColorSelectionChanged: The JavaScript function to be called when the color is changed.
Now we will create and use an AJAX ColorPickerExtender in ASP.NET.
Step 1: Open Visual Studio and create a project named AJAXColorPickerExtender.
Step 2: Add one Webform named ColorPicker.
Step 3: Now in design view we will add a ToolkitScriptManager from the ToolBox.
  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  2. </asp:ToolkitScriptManager>
Step 4: Now we will add a TextBox that contains the Hexadecimal value of the color and a Button to trigger the color picker. We will also add a DIV in which we can view a preview of the colors.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="AJAXColorPickerExtender.ColorPicker" %>
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
  5. <!DOCTYPE html>
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head runat="server">
  9. <title></title>
  10. </head>
  11. <body>
  12. <form id="form1" runat="server">
  13. <div>
  15. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  16. </asp:ToolkitScriptManager>
  17. <asp:TextBox ID="tbcolor" runat="server"></asp:TextBox>
  18. <br />
  19. <br />
  20. <div id="view" style="width:60px; height:60px; border:1px solid #000;margin:0 3px;float:left">
  21. </div>
  22. <asp:Button ID="btncolor" runat="server" Text="SelectColor" />
  23. </div>
  24. </form>
  25. </body>
  26. </html>
Now the Design View looks like this.
Step 5: Now we will add the AJAXColorPickerExtender from the AJAX panel from the ToolBox and we will provide some properties for it.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="AJAXColorPickerExtender.ColorPicker" %>
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
  5. <!DOCTYPE html>
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head runat="server">
  9. <title></title>
  10. </head>
  11. <body>
  12. <form id="form1" runat="server">
  13. <div>
  15. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  16. </asp:ToolkitScriptManager>
  17. <asp:TextBox ID="tbcolor" runat="server"></asp:TextBox>
  18. <br />
  19. <br />
  20. <div id="view" style="width:60px; height:60px; border:1px solid #000;margin:0 3px;float:left">
  21. </div>
  22. <asp:Button ID="btncolor" runat="server" Text="SelectColor" />
  23. <asp:ColorPickerExtender ID="ColorPickerExtender" runat="server"
  24. TargetControlID="tbcolor"
  25. SampleControlID="view"
  26. PopupButtonID="btncolor"
  27. PopupPosition="Right"
  28. OnClientColorSelectionChanged="Color_Change">
  29. </asp:ColorPickerExtender>
  30. </div>
  31. </form>
  32. </body>
  33. </html>
Step 6: Now On the OnClientColorSelectionChanged event we call the Color_Change JavaScript function.
  1. <script type="text/javascript">
  2. function Color_Change(sender){
  3. sender.get_element().value = "#" + sender.get_selectedColor();
  4. }
  5. </script>
The function adds a Hash (#) as prefix to the color hexadecimal value in the TextBox.
Step 7: Now the complete code will be like this.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="AJAXColorPickerExtender.ColorPicker" %>
  3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
  5. <!DOCTYPE html>
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head runat="server">
  9. <title></title>
  10. <script type="text/javascript">
  11. function Color_Change(sender){
  12. sender.get_element().value = "#" + sender.get_selectedColor();
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <form id="form1" runat="server">
  18. <div>
  20. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  21. </asp:ToolkitScriptManager>
  22. <asp:TextBox ID="tbcolor" runat="server"></asp:TextBox>
  23. <br />
  24. <br />
  25. <div id="view" style="width:60px; height:60px; border:1px solid #000;margin:0 3px;float:left">
  26. </div>
  27. <asp:Button ID="btncolor" runat="server" Text="SelectColor" />
  28. <asp:ColorPickerExtender ID="ColorPickerExtender" runat="server"
  29. TargetControlID="tbcolor"
  30. SampleControlID="view"
  31. PopupButtonID="btncolor"
  32. PopupPosition="Right"
  33. OnClientColorSelectionChanged="Color_Change">
  34. </asp:ColorPickerExtender>
  35. </div>
  36. </form>
  37. </body>
  38. </html>
Now we will run project and see the output.
This is all about AJAX ColorPickerExtender in ASP.NET.
Thank you and happy coding.