Introduction: In this post I will try to explain how we can use
Ajax BalloonPopupExtender in Asp.net.
Description:
I n the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to use AutoCompleteExtender Ajax control in Asp.net, How to use TabContainer Ajax Control in Asp.net, How to use Ajax PopupControlExtender in Asp.net.
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.
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.
Hello, everything is going fine here and ofcourse every one is sharing facts, that's genuinely fine, keep up writing.
ReplyDeleteMy page good webhosting services