HOW TO USE ASP.NET AJAX COLOR PICKER EXTENDER CONTROL

HOW TO USE ASP.NET AJAX COLOR PICKER EXTENDER CONTROL

1) Create Website2) Add aspx page
3) Add toolkitScriptManager
4) If you don't have ajax control toolkit  download from codeplex
5) Add ColorPicker Extender

asp:ColorPickerExtender Properties

1)  TargetControlID -> TextBox where color selected value will be displayed

2) PopupControlID -> Displays Color Picker Dialog Box.

3)OnClientColorSelectionChanged -> calls javascript code to set color for the textbox.

    <b>Back Color:</b>

    <asp:TextBox ID="txtBackColor" runat="server"></asp:TextBox><img src="color.jpg" id="imgBack" width="25px" height="25px" /><br />

    <b>Fore Color:</b>

    <asp:TextBox ID="txtForeColor" runat="server"></asp:TextBox><img src="color.jpg" id="imgFore" width="25px" height="25px" /><br />

    

        <asp:ColorPickerExtender ID="ColorPickerExtender1" runat="server" 

         PopupButtonID="imgBack" PopupPosition="Right" TargetControlID="txtBackColor"

        OnClientColorSelectionChanged="setBackColor">

        </asp:ColorPickerExtender>

        

<asp:ColorPickerExtender ID="ColorPickerExtender2" runat="server" 

         PopupButtonID="imgFore" PopupPosition="Right" TargetControlID="txtForeColor"

         OnClientColorSelectionChanged="setForeColor"

        >

        </asp:ColorPickerExtender>

    </div>

4) Run the Web Page

Note: This example uses 2 textboxes 1 for back color another one for fore ground color. whenever user clicks on image color picker dialog box will be displayed. after selecting the color javascript code will fire.