I am Raghuveer

In my opinion programming means thinking, and it is fun. My vision is to teach programming in more understandable manner to the students from rural background. I support programming for everyone

Showing posts with label Popup. Show all posts
Showing posts with label Popup. Show all posts

Using ASP.NET AJAX Popup Control Extender

ASP.NET AJAX Popup Control can be attached to any ASP.NET control to display additional contents in a popup window. The popup window can display either static contents just like tool tips or can be made more interactive with the help of AJAX UpdatePanel control. It can also have other ASP.NET controls inside which may or may not cause full or AJAX based asynchronous post backs using AJAX UpdatePanel. In this tutorial I will show you how you can use AJAX Popup Control Extender with server side ASP.NET controls.

ASP.NET AJAX Popup Control

To start this tutorial you need to create a blank ASP.NET page that have an instance of AJAX ScriptManager control on top. This control is required to use any AJAX related feature in ASP.NET page and to enable partial page rendering.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Then you add a markup of simple message label and a TextBox as shown in the above figure:
Favorite Sport:
<asp:TextBox ID="TextBox1" runat="server" Width="100" />

Then you need to create a popup window which you want to display with the help of AJAX Popup Control Extender. I am using ASP.NET Panel control in this tutorial to popup a RadioButtonList of different sports. You are free to popup any control you want in your application such as ASP.NET Calendar or Login controls.

<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
AutoPostBack="True" BorderColor="#336699" BorderStyle="Solid"
Width="100" BorderWidth="1" BackColor="#dadada"

In the above markup, I first declared an ASP.NET Panel control. Inside Panel I am using AJAX UpdatePanel control so that any post back occur inside Panel not cause the whole page to be flicker or refresh. UpdatePanel control contains a RadioButtonList control with some ListItems to display different sports names. Notice that the RadioButtonList control’s AutoPostBack property is set to true and an event handler is attached with the OnSelectedIndexChanged event of RadioButtonList. This is the requirement here in this tutorial because I want to update my TextBox with the selected sports name as soon as user selects any sports item from the RadioButtonList control.
Next, you need to add AJAX Popup Control Extender on the page with some basic properties set as shown in the following markup

<ajax:PopupControlExtender ID="PopupControlExtender1" runat="server"

The explanation of the above properties and some additional properties of AJAX Popup Control Extender is given below:
TargetControlID: The ID of the control you want to attach the popup control with. In the above example I am attaching popup control with TextBox control.
PopupControl: The ID of the control to display as popup window. In the above example I am using Panel control.

This is optional property and can be set to Left, Right, Top, Bottom or Center. It specifies the relative position of the popup control with respect to target control.

This property is also optional and specifies which property will return the result of the popup window. In the above example I put “value” as the value of this property. This is because every time use will select any item from the RadioButtonList control the value of the selected option will be returned from the popup.

This is another optional property and specifies the additional script to run after setting the result of the popup window.
OffsetX and OffsetY: These two properties specify the number of pixels to offset the popup window horizontally or vertically from its default position as specified by Position property.
The final bit of code you need to finish this tutorial is the SelectedIndexChanged event of RadioButtonList control that hide the popup control by calling its Commit method as soon as user select any item from the RadioButtonList. It also passes the selected value as the parameter of the Commit method so that the value can be returned to target control for display.

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

Display GridView Row Details using ASP.NET AJAX Popup Control

When you display records using ASP.NET GridView control it displays all the columns on the page and often you want to display only few columns in GridView due to the available space on the page. You can easily achieve this functionality by adding your own columns declaratively in the GridView control. But if you want to display other columns in a popup window for each row in the GridView control you need to use AJAX Popup Control with the GridView. In this tutorial I will show you how you can display GridView row details using ASP.NET AJAX Popup control extender.

ASP.NET AJAX Popup Control Extender

To start this tutorial, create a new website in Visual Studio 2008 and add ScriptManager control on the page. This control is required to use any AJAX functionality on ASP.NET page.

<asp:ScriptManager ID="ScriptManager1" runat="server">

Next you need to add GridView control on the page that has AutoGenerateColumns property set to false to stop ASP.NET to generate columns automatically. You also need to attach OnRowCreated event handler with the grid which I will use later in this tutorial to attach some JavaScript events with a magnify icon to display popup window on mouse over. Following is the complete markup of the GridView control.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BorderColor="#336699" BorderStyle="Solid" BorderWidth="1px"
CellPadding="3" Font-Names="Verdana" Font-Size="10pt"
<asp:BoundField DataField="ProductID" HeaderText="Product ID" />
<asp:BoundField DataField="ProductName" HeaderText="Product Name" />
<asp:TemplateField ItemStyle-Width="40" ItemStyle-HorizontalAlign="Right">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/magnify.gif" />
<ajax:PopupControlExtender ID="PopupControlExtender1" runat="server"
DynamicContextKey='<%# Eval("ProductID") %>'
DynamicServiceMethod="GetDynamicContent" Position="Bottom">

<HeaderStyle BackColor="#336699" ForeColor="White" />

The most important thing in the above markup is the TemplateField column definition in which I have used an image control to display magnify icon and ASP.NET AJAX Popup Control Extender.
The PopupControlID property needs the id of the control you want to use as a popup window with AJAX Popup Control in this case I have used Panel control.
The TargetControlID property needs the id of the control that will display the popup window in this case I have used Image1 control that shows magnify icon in the GridView column.
The DynamicServiceMethod property needs the name of the web service method you want to call for every popup window to load additional details from the database.
The DynamicContextKey property needs the dynamic value you want to pass to the dynamic web service method. In this example I am passing ProductID to load more details of the product in the popup window dynamically.
In the end you need a Panel control on the page which will be used as a popup window by the PopupControlExtender control.
<asp:Panel ID="Panel1" runat="server"> </asp:Panel>
Now I am moving to the code behind file of the ASP.NET page that has Page Load event to bind data with the GridView control as shown below:

protected void Page_Load(object sender, EventArgs e)
if (!Page.IsPostBack)
private void LoadData()
string constr = "Server=TestServer;Database=SampleDatabase;uid=test;pwd=test;";
string query = "SELECT ProductID, ProductName FROM Products";
SqlDataAdapter da = new SqlDataAdapter(query, constr);
DataTable table = new DataTable();
GridView1.DataSource = table;

Next you need the OnRowCreated event definition that will perform two operations during the creation of every data row of the GridView control. First it will find the Popup Extender Control using the FindControl method and will add a unique behavior id with each popup control. Secondly it will find Image control in every row and will attach showPopup() and hidePopup() script with the image onmouseover and onmouseout events. This is required to display popup window on mouse over and hide popup window on mouse out automatically.

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
if (e.Row.RowType == DataControlRowType.DataRow)
PopupControlExtender pce = e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;
string behaviorID = "pce_" + e.Row.RowIndex;
pce.BehaviorID = behaviorID;
Image img = (Image)e.Row.FindControl("Image1");
string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);
img.Attributes.Add("onmouseover", OnMouseOverScript);
img.Attributes.Add("onmouseout", OnMouseOutScript);

In the end, you need the definition of GetDynamicContent service method that will be called by every ASP.NET AJAX Popup Control Extender to load dynamic data from the database and to display additional details in the popup window. The first few lines in the method below are loading additional columns from the Products table in database. The StringBuilder object is created to build html string for the tabular output in the popup window. You can build any type of html for display such as bullets, paragraphs, links etc.

public static string GetDynamicContent(string contextKey)
string constr = "Server=TestServer;Database=SampleDatabase;uid=test;pwd=test;";
string query = "SELECT UnitPrice, UnitsInStock, Description FROM Products WHERE ProductID = " + contextKey;
SqlDataAdapter da = new SqlDataAdapter(query, constr);
DataTable table = new DataTable();
StringBuilder b = new StringBuilder();
b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; ");
b.Append("width:350px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='3'>");
b.Append("<tr><td colspan='3' style='background-color:#336699; color:white;'>");
b.Append("<b>Product Details</b>"); b.Append("</td></tr>");
b.Append("<tr><td style='width:80px;'><b>Unit Price</b></td>");
b.Append("<td style='width:80px;'><b>Stock</b></td>");
b.Append("<td>$" + table.Rows[0]["UnitPrice"].ToString() + "</td>");
b.Append("<td>" + table.Rows[0]["UnitsInStock"].ToString() + "</td>");
b.Append("<td>" + table.Rows[0]["Description"].ToString() + "</td>");
return b.ToString();

If you have implemented everything in this tutorial properly you will see the output similar to the figure shown in the start of this tutorial. Please make sure that you have imported the following namespaces in the code file before you run this project.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using AjaxControlToolkit;
using System.Text;

Also make sure that you have registered the AjaxControlToolkit in your aspx file using the Register directive as shown below:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>