Introduction :
This extender allows end user to pick a color from the popup panel of colors. If end user wants to select a color other than the basic color , for example say he wants to select either darker shade or lighter shade of a color ,it wont be possible if we provide a dropdown list with basic colors( red, green ,blue...). So to achieve this we can use ColorPickerExtender which allows end user to select color from the popup panel of colors.
Example using ColorPickerExtender:
Step 1 : Register AjaxControlToolKit.
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajaxToolkit" %>Step 2 : Add ToolKitScriptManager to the page.
<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
Step 3 : Drag and drop a textbox.
Step 4 : Add ColorPickerExtender and assign textbox ID to the “TargetControlID” .
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Color Picker Extender</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
Pick your favourite Color:<asp:TextBox ID="txtColor" runat="server" >
</asp:TextBox>
<br /> <br />
<ajaxToolkit:ColorPickerExtender ID="ColorPickerExtender1" runat="server"
TargetControlID="txtDate" >
</ajaxToolkit:ColorPickerExtender>
</div>
</form>
</body>
</html>
When textbox gets focus , a popup appears near textbox which allows user to select a color. After selection popup disappears and hexadecimal code of the selected color is seen as text in the textbox.
No comments:
Post a Comment