Accordion Control In Ajax

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
The Accordion control supports the following AutoSize modes to accommodate a variety of page layouts.
1. None: - The Accordion control grows and shrinks without restriction. This can cause other elements on the page to move up and down in order to accommodate the Accordion control.
2. Limit: - The Accordion control never grows larger than the value specified by its Height property. This causes the content to scroll if the content is too long to be displayed in the allotted space.
3. Fill: - The Accordion control is a fixed size as specified in its Height property. This causes the content to be expanded or shrunk if the content does not fit exactly into the allotted space.

ConfirmButtonExtender Control In Ajax

ConfirmButtonExtender 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 behaviour; 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.
ConfirmButtonExtender Properties:-
1.TargetControlID: - The ID of the Button control to extend.
2. ConfirmText :- The confirmation text to display.
3. OnClientCancel: - The client script to execute when the Cancel button is clicked in the confirm dialog box.
4. ConfirmOnFormSubmit :- true if the confirm dialog box should not be displayed until just before the form is submitted. This is useful if the page contains ASP.NET validator controls and the confirm dialog box should be displayed only after all validation checks pass.

ModalPopupExtender Control In Ajax

The ModalPopupExtender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
You can provide OnShowing/OnShown/OnHiding/OnHidden animations which are played when the modal content is shown and hidden. For example, you can use these animations to fade-in and fade-out modal content.

CollapsiblePanelExtender Control In Ajax

The CollapsiblePanelExtender adds collapsible sections to a Web page. This extender targets any ASP.NET Panel control. You specify which control or controls on the page should act as the open and close controllers for the panel. Alternatively the panel can be set to automatically expand and collapse when the mouse cursor moves in or out of it.
The panel is postback aware. During a client postback, the panel remembers and restores its client state.
You can specify whether the panel should scroll when the content is larger than the panel, and whether the panel expands horizontally or vertically (height or width).
CollapsiblePanelExtender Properties:-
 1. TargetControlID :- The ID of the control to expand and collapse.
2. CollapsedSize :- The size of the target, in pixels, when it is in the collapsed state.
3. ExpandedSize :- The size of the target, in pixels, when it is in the opened state.

CalendarExtender Control In Ajax

The Calendar control enables you to display a date picker when focus is moved to an input element.
Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date.
CalendarExtender Properties:
1. TargetControlID :- The ID of the TextBox to extend with the calendar.
2. CssClass :- Name of the CSS class used to style the calendar. See the Calendar Theming section for more information.
3. Format :- Format string used to display the selected date.
4. PopupButtonID :- The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus.

DropShadowExtender Control In Ajax

DropShadow is an extender that applies a drop shadow to an ASP.NET Panel control. The extender allows you to specify how wide the shadow is, how opaque it is, and whether the shadow should have rounded corners. For pages that let the user move or resize the panel, the DropShadow extender has a mode that will resize and reposition the shadow to match the target panel at run time.
DropShadowExtender Properties:-
1. TargetControlID :- The ID of the control to extend.
2. Width: - The width, in pixels, of the drop shadow. The default is 5.
3. Opacity :- The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default is    .5.
4. TrackPosition :- A Boolean value that specifies whether the DropShadow should track the position of the panel it is attached to. Set this property to true if the panel is absolutely positioned or if it might move at run time. The default is false.
5. Rounded: - A Boolean value that specifies whether the corners of the target and drop shadow should be rounded.

BalloonPopupExtender Control In Ajax

The BalloonPopupExtender control displays a popup which can contain any content. For example, you can use the BalloonPopupExtender to display help information when you move focus to a TextBox control.
The BalloonPopupExtender supports three different styles: Balloon, Rectangle, and Custom. You can select among three different sizes for the popup: Small, Medium, and Large. If you set the BalloonPopup style to the value Custom then you can define a custom appearance for the BalloonPopup. In that case, you also need to set the CustomCssUrl property to point to a custom style sheet.
This control can be set to 5 positions - TopLeft, TopRight, BottomLeft, BottomRight and Auto. If you select the value Auto then the position of the BalloonPopup is determined automatically based on available space.
You can set the BalloonPopExtender to be triggered by the MouseOver, Focus or Click events. The control is hidden automatically when you click outside the Balloon Popup.

PopupControlExtender Control In Ajax

Example:
<form id="form1" runat="server">
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
 <h3> Using PopupControlExtender</h3>
 <hr />
 <div>
 <b>Enter Your Favourite Language: </b>
 <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>
 <asp:Panel ID="Panel1" runat="server">
 <div style="border: 1px outset white; width: 150px">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>

PopupControlExtender Control In Ajax

PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.

ToggleButtonExtender Control In Ajax

ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behaviour of the CheckBox is unaffected.
ToggleButton Properties:
1. TargetControlID: - The ID of the CheckBox to modify
2. ImageHeight\ImageWidth :- The height and width of the image
3. CheckedImageUrl :- the URL of the image to show when the toggle button is in the checked state.
4. UncheckedImageUrl: - the URL of the image to show when the toggle button is in the unchecked state.
5. DisabledCheckedImageUrl :- the URL of the image to show when the toggle button is disabled and in  the checked state.
6. DisabledUncheckedImageUrl: - the URL of the image to show when the toggle button is disabled and in the unchecked state.

ResizableControlExtender Control In Ajax

ResizableControlExtender is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window. The appearance of the resize handle can be specified by the page designer with a CSS style. The content within the element can use CSS styles to automatically resize to fit the new dimensions. Alternatively, ResizableControlExtender exposes two events (onresizing and onresize) that the page designer can attach custom script to in order to enable more complex layout logic.
ResizableControlExtender Properties:-

1. TargetControlID: - The ID of the element that becomes resizable
2. HandleCssClass: - The name of the CSS class to apply to the resize handle
3. ResizableCssClass :- The name of the CSS class to apply to the element when resizing

RoundedCornersExtender Control In Ajax

The RoundedCorners extender applies rounded corners to existing elements. To accomplish this, it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose which corners of the target panel should be rounded by setting the Corners property on the extender to None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All.
RoundedCornersExtender Properties:-
1.TargetControlID :- The ID of the control to extend.
2. Radius: - The radius of the corners (and height of the added area). The default is 5.
3. Corners :- The corners of the target panel that should be rounded (None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All)
4. BorderColor: - Gets or sets a string that contains the color of the border and therefore of the rounded corners.

TextBoxWatermarkExtender Control In Ajax

TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behaviour. When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.
TextBoxWatermarkExtender Properties:-
1.TargetControlID :- The ID of the TextBox to operate on
2.WatermarkText: - The text to show when the control has no value
3.WatermarkCssClass :- The CSS class to apply to the TextBox when it has no value .

ValidatorCalloutExtender Animations In Ajax

Generic animations for the ValidatorCallout extender:-
OnShow -
The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects.
OnHide -
The OnHide animation will be played each time the validation popup is hidden.
Ex:-
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="Server" TargetControlID="RequiredFieldValidator1">
 <Animations>
<OnShow>
 <Sequence>
 <HideAction Visible="true" />
 <FadeIn Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
 </Sequence>
 </OnShow>

ValidatorCalloutExtender In Ajax

ValidatorCalloutExtender:
ValidatorCalloutExtender is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCalloutExtender and set its TargetControlID property to reference the validator control.
ValidatorCalloutExtender Properties:-
1. TargetControlID :- The ID of the Validator to extend
2. Width :- The width of the callout
3. CssClass :- Name of the CSS class used to style the ValidatorCallout.
4. HighlightCssClass: - A CssClass to apply to the invalid field
5. WarningIconImageUrl :- The path to a custom warning icon image