Ajax Control Toolkit BalloonPopupExtender

HI..

In this article we going to see about latest release of Ajax control.. Ajax Control Toolkit November 2011 Release added some new control . This release introduces a new Balloon Popup control, support for vertical tabs, and support for keyboard tab navigation.

Now we have see about balloon popup extender control..

First you have to download new AJAX Control Toolkit is November 2011 from the below URL.

http://ajaxcontroltoolkit.codeplex.com/

After you install Ajax toolkit control and add the ballon popup extender to your project ..For your reference go through the below mention code…

<div>

        <br />

        <br />

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

       Enter Your password: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:Label ID="lblruls" runat="server" Text="Password Rules click Here"></asp:Label>

    <div>

           <asp:Panel ID="Pan1" runat="server">

       Enter Your Password

           </asp:Panel>

            <asp:Panel ID="Panel1" runat="server" class="bgcolor">

            Password contains minimum six digit Number

            </asp:Panel>

       </div>

        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" UseShadow ="true"  TargetControlID ="textbox1" BalloonPopupControlID ="pan1" CustomClassName="oval"  CustomCssUrl ="bgcolor" BalloonStyle ="Cloud" BalloonSize ="Small">

        </asp:BalloonPopupExtender>

‘Here’s how you display the Balloon Popup when you hover over the link

        <asp:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server" UseShadow ="true"  TargetControlID ="lblruls" BalloonPopupControlID ="panel1" CustomClassName="oval" DisplayOnMouseOver ="true"  CustomCssUrl="bgimage">

        </asp:BalloonPopupExtender>

    </div>

Properties of balloon popup extender:

·         TargetControlID - The ID of the control to attach to.

·         BalloonPopupControlID - The ID of the control to display.

·         Position - Optional setting specifying where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto) Default value is Auto.

·         OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position. Default value is 0.

·         BalloonStyle - Optional setting specifying the theme of balloon popup. (Cloud, Rectangle, Custom). Default value is Rectangle.

·         BalloonSize - Optional setting specifying the size of balloon popup. (Small, Medium and Large). Default value is Small.

·         CustomCssUrl - This is required if user choose BalloonStyle to Custom. This specifies the url of custom css which will display custom theme.

·         CustomClassName - This is required if user choose BalloonStyle to Custom. This specifies the name of the css class for the custom theme.

·         UseShadow - Optional setting specifying whether to display shadow of balloon popup or not.

·         ScrollBars - Optional setting specifying whether to display scrollbar if contents are overflowing. This property contains 5 options - None, Horizontal, Vertical, Both and Auto. Default value is Auto.

·         DisplayOnMouseOver - Optional setting specifying whether to display balloon popup on the client onMouseOver event. Default value is false.

·         DisplayOnFocus - Optional setting specifying whether to display balloon popup on the client onFocus event. Default value is false.

·         DisplayOnClick - Optional setting specifying whether to display balloon popup on the client onClick event. Default value is true.

·         Animations - Generic animations for the PopupControlExtender. See the Using Animations walkthrough and Animation Reference for more details.

·         OnShow - The OnShow animation will be played each time the 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 popup is hidden.

 I hope this one will be useful to all………..