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:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
<%--use the colorpicker extender here--%>
<cc1:ColorPickerExtenderID="ColorPickerExtender1"runat="server"TargetControlID="TextBox1" SampleControlID="Panel1">
</cc1:ColorPickerExtender>
<asp:LabelID="Label2"runat="server"Text="Change panel backcolor"> </asp:Label>
<asp:TextBoxID="TextBox1"runat="server">Select</asp:TextBox>
<br/><br/>
<asp:PanelID="Panel1"runat="server"Width="300px"Height="200px"
BorderColor="#CCCC00"BackColor="#66FF99"BorderStyle="Groove">
<br/>
<asp:LabelID="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 SampleControlIDis "Panel1" so Panel1 backcolor will be changed.
Rahul Kesharwani
21-May-2020Many thanks for this example.
g
Anonymous User
25-Feb-2019Nice Article.
Sushant Mishra
12-Jul-2017Thanks for sharing informative post.