Let us learn Balloon Popup Control - Cloud and Rectangle Style

Raj.Trivedi
Posted by in ASP.NET AJAX category on for Beginner level | Points: 250 | Views : 3994 red flag

In this article we will see how we can use and implement Balloon Popup Control.

Introduction


Sometimes we need to save space on the web form and let user know how he has to interact with the Page.The Balloon Popup control allows us to save space and also give some new look to UI. 

Objective


  1. Understanding Balloon Popup
  2. Implementing Cloud Style and Rectangle Style

Balloon Popup Control :-

  1. It helps to display content of any type
  2. It has 3 different styles of Balloon a) Cloud b) Rectangle c) Custom.
  3. It has 3 Different size available i.e. Small , Medium, Large
  4. To use a different shape then you need to use CSS and define the CSS url in CustomCSSUrl Property.
  5. The Control can have 5 variants of positions :- TopLeft, TopRight, BottomLeft, BottomRight and Auto
  6. Auto will automatically adjust the popup according the space available in the form.


Using the code


  1. Create an Empty Website in VS2010 and then add a web form.
  2. Now we need to embed AjaxControlToolkit in the Website for that please follow the steps 1-12 in the following article Link :- http://www.dotnetfunda.com/articles/article2344-upload-image-using-ajax-async-file-uploader-in-database.aspx
  3. Remember :- We are working with Balloon Popup control so we need to drag and drop Balloon Popup  control  and not A SYNC Up-loader.

Lets Start Implementation
// HTML Mark Up
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BallonPopup.aspx.cs" Inherits="BallonPopup" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    
<asp:toolkitscriptmanager ID="Toolkitscriptmanager1" runat="server"></asp:toolkitscriptmanager>
    <div>
        <asp:TextBox ID="xtxtBallon" runat="server"></asp:TextBox>
        <asp:BalloonPopupExtender ID="xtxtBallon_BalloonPopupExtender" runat="server" 
             Enabled="True" ExtenderControlID="" BalloonStyle="Cloud" BalloonPopupControlID="pnl"
            BalloonSize="Small" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnClick="true"
            TargetControlID="xtxtBallon"></asp:BalloonPopupExtender>
        <br />
        <asp:Panel ID="pnl" runat="server">
        This is a  Cloud Balloon
        </asp:Panel>
        
    </div>

<br />
<br />
<br />
    <div>
        <asp:TextBox ID="xtxtRectangle" runat="server"></asp:TextBox>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" 
             Enabled="True" ExtenderControlID="" BalloonStyle="Rectangle" BalloonPopupControlID="Panel1"
            BalloonSize="Small" ScrollBars="Auto" DisplayOnMouseOver="true" DisplayOnClick="true"
            TargetControlID="xtxtRectangle"></asp:BalloonPopupExtender>
        <br />
        <asp:Panel ID="Panel1" runat="server">
        This is a  Rectangle Baloon
        </asp:Panel>
        
    </div>

    </form>
</body>
</html>

Cloud Balloon



Rectangle Balloon



Important Properties

TargetControlID :- The ID of the Control to which the Extender has to be attached.
BalloonPopupControlID :- The ID of the Control to be displayed in POP -UP
DisplayonMouseOver :- To show the popup on MouseOver on the Control
DisplayonFocus :- To show the popup on Focusr of the Control
DisplayonClick :- To show the popup on MouseClick on the Control.
ScrollBars :-  Enables Scroll bars if the content is overflowing.None, Horizontal, Vertical, Both and Auto. Default value is Auto.

Conclusion


You can also use your own style and animations, for the same we need to use Custom Css and apply it to CustomCss Property.

Reference



Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)