Tuesday, July 16, 2013

How to use Ajax BalloonPopupExtender control in Asp.net OR Ajax BalloonPopupExtender Example

Introduction: In this post I will try to explain how we can use Ajax BalloonPopupExtender in Asp.net.
BalloonPopupExtender

We use the BalloonPopupExtender control to display the popup which contains the content e.g. for help information. BalloonPopupExtender properties:
TargetControlID: ID of the control to attach
BalloonPopupControlID: ID of the control to display
BalloonSize: Optional setting for specify the size of balloon popup i.e. small, medium and large
BalloonStyle: Optional setting specify the theme of balloon popup i.e. Cloud, Rectangle and custom
DisplayOnMouseOver:Optional setting whether to display the balloon popup on the client on MouseOver event or not.
UseShadow: Optional setting whether to display shadow of ballon popup or not.
CustomCssUrl: This is require if we choose BalloonStyle to Custom. Specify the URL of custom CSS which will display the custom theme.
CustomClassName: This is require if we choose BalloonStyle to Custom. Specify the Name of custom CSS class which will display the custom theme.

Add a webform to project. Drag and drop the control from Toolbox as the design mention below:
<asp:ScriptManager ID="ScriptManager2" runat="server">
        </asp:ScriptManager>
        <table><tr><td>First Name:</td><td><asp:TextBox ID="txtfirst" runat="server"></asp:TextBox></td></tr>
        <tr><td>Middle Name:</td><td><asp:TextBox ID="txtmiddlename" runat="server"></asp:TextBox></td></tr>
         <tr><td>Last Name:</td><td><asp:TextBox ID="txtlast" runat="server"></asp:TextBox></td></tr>      
        </table>       
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="txtfirst" BalloonPopupControlID="pan1" BalloonSize="Medium" BalloonStyle="Rectangle" DisplayOnMouseOver="true" UseShadow="true">
        </asp:BalloonPopupExtender>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender2" runat="server" TargetControlID="txtmiddlename" BalloonPopupControlID="pan2" BalloonSize="Small" BalloonStyle="Cloud" DisplayOnMouseOver="true">
        </asp:BalloonPopupExtender>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender3" runat="server" TargetControlID="txtlast" BalloonPopupControlID="pan3" BalloonSize="Medium" DisplayOnMouseOver="true" BalloonStyle="Custom" UseShadow="true" DisplayOnFocus="true" CustomClassName="oval" CustomCssUrl="~/CSS/Custom.css">
        </asp:BalloonPopupExtender>    
          <asp:Panel ID="pan1" runat="server">
    Enter your First Name
        </asp:Panel>
        <asp:Panel ID="pan2" runat="server">
    Enter your Middle Name
        </asp:Panel>
        <asp:Panel ID="pan3" runat="server">
    Enter your Last Name
        </asp:Panel>

Now run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

1 comment:

  1. Hello, everything is going fine here and ofcourse every one is sharing facts, that's genuinely fine, keep up writing.


    My page good webhosting services

    ReplyDelete