Home > DeveloperSection > Beginner > Ajax Toolkit ColorPickerExtender Control in ASP.Net

Ajax Toolkit ColorPickerExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 14108  View(s)
Rate this:

Ajax Toolkit ColorPickerExtender Control in ASP.Net


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


AjaxControl Toolkit ColorPickerExtender Control in ASP.Net

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

AjaxControl Toolkit ColorPickerExtender Control in ASP.Net

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

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

 

AjaxControl Toolkit ColorPickerExtender Control in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick