ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control.

ColorPicker Properties:

·         TargetControlID - The ID of the TextBox to extend with the color picker.

·         PopupButtonID - The ID of a control to show the ColorPicker popup when clicked. If this value is not set, the color picker will pop up when the textbox receives focus.

·         SampleControlID - The ID of a control to show the ColorPicker's selected color. If this value is set and the color picker popup is open the background color of the sample control will sample the hovered color.

·         PopupPosition - Indicates where the color picker popup should appear at the BottomLeft (default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.

·         SelectedColor - Indicates the color value the ColorPicker extender is initialized with.

Code:

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<%--use the colorpicker extender here--%>

<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="TextBox1" SampleControlID="Panel1">

</cc1:ColorPickerExtender>

<asp:Label ID="Label2" runat="server" Text="Change panel backcolor"> </asp:Label>

<asp:TextBox ID="TextBox1" runat="server">Select</asp:TextBox>

<br /><br />

<asp:Panel ID="Panel1" runat="server" Width="300px" Height="200px"

BorderColor="#CCCC00" BackColor="#66FF99" BorderStyle="Groove">

<br />

<asp:Label ID="Label1" runat="server" Text="This is colorpicker test"> </asp:Label>

</asp:Panel>

Run the project

When focus goes to the textbox then color selector popup window will open.

When you select color then specified SampleControlID="Panel1" back color will be changed.

Here SampleControlID is "Panel1" so Panel1 backcolor will be changed.

• Home
•  | 
• Contact Us
•  | 
• Services
•  | 
• Feedback
•  | 
• Advertisement
•  | 
• Privacy Policy
•  | 
• Term & Conditions
•  | 
• About Us