articles

Home / DeveloperSection / Articles / Ajax Toolkit ColorPickerExtender Control in ASP.Net

Ajax Toolkit ColorPickerExtender Control in ASP.Net

Anonymous User20603 06-Dec-2010

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


Ajax Toolkit ColorPickerExtender Control in ASP.Net

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

Ajax Toolkit ColorPickerExtender Control in ASP.Net

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

Here SampleControlIDis "Panel1" so Panel1 backcolor will be changed.

 

Ajax Toolkit ColorPickerExtender Control in ASP.Net





Updated 04-Mar-2020
I am a content writter !

Leave Comment

Comments

Liked By