Creating a Popup Window Details Grid in a DataGrid
This articles topic came from the suggestion of a true DotNetJunkie. He originally sent an email to us asking for an example illustrating how to make a HyperLinkColumn in a DataGrid spawn events that would pop up a new window with details of the row that the user clicked on. Before we could anwser his email he had already emailed us back explaining that he had found a way to do it and suggested a tutorial of his discovery. So, here it is! As with most of our articles, this simplifies the task, but easy examples of coding techniques is what gives developers ideas for more complex senerios.
This example contains two WebForms and one external style sheet (All code is included in the download) - The first WebForm contains a DataGrid with a list of products from the Northwind database and a hyperlink that states "SeeDetails". Once this link is clicked the JavaScript Window.Open method is used to open a new window. Within the URL is a Query String parameter of the ProductID of the product the user wants the details for. In the second WebForm there is another DataGrid that shows the user all the details for the chosen product. The stylesheet is used just because its cleaner to use than inline styles. So lets take a look at WebForm1.aspx and WebForm1.aspx.cs
WebForm1.aspx
WebForm1.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient ;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace HowTos.DataGrid.PopupWindow
{
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
#region User Defined Code
private void Page_Load(object sender, System.EventArgs e)
{
if ( ! this.IsPostBack )
this.BindData();
}
protected void BindData()
{
SqlCommand cmd = new SqlCommand( "SELECT TOP 10 ProductID, ProductName FROM Products", con("Server=LocalHost; DataBase=Northwind; TRUSTED_CONNECTION=TRUE"));
this.DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
this.DataGrid1.DataBind();
}
protected SqlConnection con(System.String ConnectionString )
{
SqlConnection c = new SqlConnection( ConnectionString );
c.Open();
return c;
}
#endregion
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
There isn't really anything out of the ordinary on here except for the details of DataNavigateUrlFormatString You'll notice that I actually have JavaScript window.open directly in it (Note: I could have just as easily created an external .js file or
within the WebForm - I used it inline for simplicity. This JavaScript code should look familiar to all so I won't go into discussion about it. Essentially, it will open a new browser with the page WebForm2.aspx with a query string parameter ProductID. This value is the ProductID from our data source. So let's look at WebForm2.aspx and WebForm2.aspx.cs
WebForm2.aspx
WebForm2.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient ;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace HowTos.DataGrid.PopupWindow
{
public class WebForm2 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
#region User Defined Code
private void Page_Load(object sender, System.EventArgs e)
{
if ( ! this.IsPostBack )
this.BindData();
}
protected void BindData()
{
SqlCommand cmd = new SqlCommand( "SELECT * FROM Products WHERE ProductID = @ProductID", con("Server=LocalHost; DataBase=Northwind; TRUSTED_CONNECTION=TRUE"));
cmd.Parameters.Add(new SqlParameter("@ProductID", SqlDbType.VarChar, 200));
cmd.Parameters["@ProductID"].Value = Request["ProductID"].ToString();
this.DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
this.DataGrid1.DataBind();
}
protected SqlConnection con(System.String ConnectionString )
{
SqlConnection c = new SqlConnection( ConnectionString );
c.Open();
return c;
}
#endregion
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
WebForm2.aspx is also quite simple. The only object that resides on the page is a DataGrid which is bound to a SqlDataReader. The Reader gets the data for the product based on the query string parameter of the ProductID value. Let's quickly look at the CSS (Cascading Style Sheet) file and then below that contains a figure illustrating WebForm1.aspx when it is first rendered:
StyleSheet1.css
/* Style Sheet */
BODY
{
margin-left: 0;
margin-top:10;
}
.HEADERSTYLE
{
background-color: #3a6ea5;
color: #FFFFFF;
font-weight:bold;
}
.ITEMSTYLEDEFAULT
{
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
}
.ITEMSTYLEHYPERLINK {
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
}
A:LINK
{
color: #000000;
}
A:VISITED
{
color: #000000;
}
A:HOVER
{
color: #3a6ea5;
}
The hyperlink for details is in the far right row. The following figure contains an image of WebForm2.aspx with the details:
Well, that's it. Simple as pie after you know how. Until next time! Donny Mack
