Friday 20 November 2015

Balloon Popup Control

             In this article I'm trying to explain how to work with Balloon Popup control in ASP.net using AJAX. During this we can learn how to work with Popup styles, to put simple efforts. And also we can learn how to show custom styles. For beginners this article will help you how to use this control.

 
 

AJAX Balloon Popup Extender Control :



               In this article I'm trying to explain how to work with Balloon Popup control in ASP.net using AJAX. During this we can learn how to work with Popup styles, to put simple efforts. And also we can learn how to show custom styles. For beginners this article will help you how to use this control.

Description:


             Balloon pop up extender is used to show like help file. It will display the content inside what we provide for displaying purpose.


            Balloon Extender supports 3 different types of styles like Cloud, Rectangle, and Custom. We can choose 3 different sizes for the popup like small, medium, and large.

If we choose Balloon Style is either Cloud or Rectangle need not to set the properties CustomClassName and CustomCssUrl both are optional.

If we choose Balloon Style is Custom then we must set properties CustomClassName and CustomCssUrl.

We can able to set this Balloon control to be triggered by the Mouse Over, focus or Click events of the control. If we click outside the control automatically it's disappear.

Properties:


  • TargetControlId: which control need to target need to pass that control ID.
  • BalloonPopupControlId: which control need to display the message need to pass that control ID.
  • Position: Need to set the position (Top Right, Top Left, Bottom Right, Bottom Left, Default)
  • Balloon Style: Which style need to show( by default Rectangle)
  • CustomClassName: need to give a name for the control, if we choose Balloon Style is Custom.
  • CustomClassUrl: need to pass URL of the CSS class, if we choose Balloon Style as Custom.
  • BallonSize: using this we can set the size of the Balloon Control (Large, Medium, Small).
     

AJAX:


         For this we must download AJAX control Toolkit dll and add reference to the project, by right clicking the project and choose assembly reference to add that.

After added the dll add below lines of code in source code.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 
Now, you are able to call the Balloon Control in your source.   
<ajaxToolkit:BalloonPopupExtender ID="bperec" runat="server" TargetControlID="txtRec" BalloonPopupControlID="spn" BalloonStyle="Rectangle"></ajaxToolkit:BalloonPopupExtender>
 
 

Rectangle Balloon Style:

This is the Default style to display for BalloonPopupExtender control. Refer below sample to do this.

<td align="right">
      Rectangular Style :            
</td>
<td align="left">
    <asp:TextBox ID="txtRec" runat="server" Width="200px"></asp:TextBox>
    <span id="spn" runat="server" >
         Rectangular style of Baloon to appear.
    </span>
    <ajaxToolkit:BalloonPopupExtender ID="bperec" runat="server" TargetControlID="txtRec" BalloonPopupControlID="spn" BalloonStyle="Rectangle"></ajaxToolkit:BalloonPopupExtender>                
</td>
 
When we call this in our Application the output become like below.


Output:
 

 

 


Cloud Balloon Style:



If we need to show cloud type of style then we must set the property Balloon Style as Cloud.
 

<td align="right">
    Cloud Style :
</td>
<td align="left">
   <asp:TextBox ID="txtcloud" runat="server" Width="200px"></asp:TextBox>
   <asp:Panel id="pnl" runat="server" >
        Cloud style of Baloon to appear.
   </asp:Panel>
   <ajaxToolkit:BalloonPopupExtender ID="bpecloud" runat="server" TargetControlID="txtcloud" BalloonPopupControlID="pnl"  BalloonStyle="Cloud"></ajaxToolkit:BalloonPopupExtender>    
</td>
 
When we call this in our Application the output become like below.


Output:
 

 

 

Custom Balloon Style:



If we want to display the Balloon style with custom style then we must set 2 properties, those are CustomClassName and CustomCssUrl. If we are not set those 2 then we get the server error.


<td align="right">
    Custom Style :
</td>
<td align="left">
    <asp:TextBox ID="txtcust" runat="server" Width="200px"></asp:TextBox>
    <asp:Panel id="p" runat="server">
         Custom style of Baloon to appear.
    </asp:Panel>
       
    <ajaxToolkit:BalloonPopupExtender ID="bpecust" runat="server" TargetControlID="txtcust" BalloonPopupControlID="p" BalloonStyle="Custom"
                          CustomClassName="oval" CustomCssUrl="Styles/StyleSheet.css" Position="BottomRight" BalloonSize="Medium" UseShadow="true"></ajaxToolkit:BalloonPopupExtender>    
</td>
 
 
If we implement this in our application then the output become like below.


Output:
 

 

Source Code: 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BaloonPopUp.aspx.cs" Inherits="BaloonPopUp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>
    <style type="text/css">
        .style1
        {
            font-size: x-large;
            color: #003366;
        }
        .ajax__balloon_popup .oval {
 background-image:url("oval.png");
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center" >
        <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />

        <strong><span class="style1">AJAX BalloonPopUp Demo</span></strong>
        <br />
        <br />
        <br />
        <table width="100%">
            <tr>
                <td align="right">
                    Rectangular Style :            
                </td>
                <td align="left">
                    <asp:TextBox ID="txtRec" runat="server" Width="200px"></asp:TextBox>
                    <span id="spn" runat="server" >
                        Rectangular style of Baloon to appear.
                    </span>
                    <ajaxToolkit:BalloonPopupExtender ID="bperec" runat="server" TargetControlID="txtRec" BalloonPopupControlID="spn" BalloonStyle="Rectangle"></ajaxToolkit:BalloonPopupExtender>                
                </td>
            </tr>
            <tr>
                <td align="right">
                     Cloud Style :
                </td>
                <td align="left">
                    <asp:TextBox ID="txtcloud" runat="server" Width="200px"></asp:TextBox>
                    <asp:Panel id="pnl" runat="server" >
                        Cloud style of Baloon to appear.
                    </asp:Panel>
                    <ajaxToolkit:BalloonPopupExtender ID="bpecloud" runat="server" TargetControlID="txtcloud" BalloonPopupControlID="pnl"  BalloonStyle="Cloud"></ajaxToolkit:BalloonPopupExtender>    
                </td>
            </tr>
            <tr>
                <td align="right">
                    Custom Style :
                </td>
                <td align="left">
                    <asp:TextBox ID="txtcust" runat="server" Width="200px"></asp:TextBox>
                    <asp:Panel id="p" runat="server">
                        Custom style of Baloon to appear.
                    </asp:Panel>
        
                    <ajaxToolkit:BalloonPopupExtender ID="bpecust" runat="server" TargetControlID="txtcust" BalloonPopupControlID="p" BalloonStyle="Custom"
                          CustomClassName="oval" CustomCssUrl="Styles/StyleSheet.css" Position="BottomRight" BalloonSize="Medium" UseShadow="true"></ajaxToolkit:BalloonPopupExtender>    
                </td>
            </tr>
        </table>
        
    </div>
    </form>
</body>
</html>
 

ScriptManager: 


<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />
 
Without wrote this line in source code it’s throws the server error to overcome this issue we just add above lines of code under div tag.
 
 

Conclusion:


Now, you understand how to show the Balloon Pop up Extender control works and how to integrate this into our Application.
 

No comments:

Post a Comment