Ajax-Colorpicker

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. You can interact with the color picker by clicking on a color to select the color. Optionally, a PopupButton control and a SampleControl can be provided which allows customizing ColorPicker's behavior.

In addition, if a custom color value is entered in a targeted TextBox then the sample control if it's used can demonstrate a custom color even if it's not in a color picker palette.

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. If this value is not set, the selected color is not shown.
• 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.
• OnClientColorSelectionChanged - A client JavaScript function that will be called when the colorSelectionChanged event is raised.

ConformButtonExtendar

ConfirmButton is a simple extender that catches clicks on a button (or any instance of a type derived from Button) and displays a message to the user. If the "OK" button is clicked, the button or link functions normally. If not, the click is trapped and the button will not perform its default submit behavior; optionally, a client script is executed if the OnClientCancel property is set. This is useful for delete links or anything else that requires confirmation from the user.






ConfirmButton Properties
============================

<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server"
    TargetControlID="LinkButton1"
    ConfirmText="Are you sure you want to click this?"
    OnClientCancel="CancelClick" />

• TargetControlID - The ID of the button or link for this extender to operate on.
• ConfirmText - The text to show when you want to confirm the click. (Note: HTML entities can be used here (ex: "
" for new-line))
• OnClientCancel - The client-side script that executes when the cancel button is clicked in the confirm dialog.
• ConfirmOnFormSubmit - True if the confirm dialog should wait until just before the form submits to display. This is useful when ASP.NET validators are in use and the confirm should be shown only after all validators pass.
• DisplayModalPopupID - Optionally specifies the ID of a ModalPopup control to use for displaying the confirmation dialog (instead of window.confirm). When using DisplayModalPopupID, the following conditions must be met:
  • The ModalPopup must be configured to work against the same TargetControlID as the ConfirmButton (and should work properly if the ConfirmButton is disabled).
  • The ModalPopup must specify OkControlID and/or CancelControlID to identify the buttons corresponding to window.confirm's OK/Cancel buttons.
  • The ModalPopup must not specify OnOkScript or OnCancelScript.

AJAX -DropShadowExtender Control

DropShadow is an extender which applies a "Drop Shadow" to a Panel. It allows you to specify how wide the shadow is as well as how opaque it is, or if you would like rounded corners. For pages that allow the user to move or resize the panel, the DropShadow has a mode that will resize/reposition it to match that of the target panel at run time.

 DropShadow Properties

The control above is initialized with this code. The properties in italic are optional.

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
    TargetControlID="Panel1" 
    Opacity=".8" 
    Rounded="true"
    TrackPosition="true" />

• TargetControlID - The ID of the button or link for this extender to operate on
• Width - The width, in pixels of the drop shadow. Default value is 5.
• Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default value is .5.
• TrackPosition - Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.
• Rounded - Set to true to set rounded corners on the target and the shadow. Default is false.

Code In XML View

----------------------------------------

1. <%@ Page Language="C#" AutoEventWireup="true" %>  
2.   
3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
4.   
5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
6. <script runat="server">  
7.       
8. </script>  
9. <html xmlns="http://www.w3.org/1999/xhtml" >  
10. <head id="Head1" runat="server">  
11.     <title>Ajax DropShadowExtender - How to use DropShadowExtender in asp.net ajax</title>  
12. </head>  
13. <body>  
14.     <form id="form1" runat="server">  
15.     <div>  
16.         <h2 style="color:Crimson; font-style:italic;">Ajax Control Toolkit Example: Using DropShadowExtender</h2>  
17.         <hr width="600" align="left" color="Pink" />  
18.         <asp:ScriptManager   
19.             ID="ScriptManager1"  
20.             runat="server"  
21.             >  
22.         </asp:ScriptManager>  
23.         <cc1:DropShadowExtender   
24.             ID="DropShadowExtender1"  
25.             runat="server"  
26.             TargetControlID="Panel1"  
27.             >  
28.         </cc1:DropShadowExtender>  
29.         <br /><br />  
30.         <asp:Panel   
31.             ID="Panel1"  
32.             runat="server"  
33.             BackColor="Gray"  
34.             ForeColor="Snow"  
35.             Width="300"  
36.             Height="150"  
37.             HorizontalAlign="Center"  
38.             >  
39.             <br />  
40.             <asp:TextBox   
41.                 ID="TextBox1"  
42.                 runat="server"  
43.                 BackColor="Snow"  
44.                 ForeColor="OrangeRed"  
45.                 Text="email"  
46.                 >  
47.             </asp:TextBox>  
48.             <br /><br />  
49.             <asp:Button   
50.                 ID="Button1"  
51.                 runat="server"  
52.                 Font-Bold="true"  
53.                 ForeColor="SlateBlue"  
54.                 Height="40"  
55.                 Text="Subscribe Our Newsletter"  
56.                 />  
57.         </asp:Panel>  
58.     </div>  
59.     </form>  
60. </body>  
61. </html>