| 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
|
<%@ Page language="c#" AutoEventWireup="false"
Inherits="HowTos.DataGrid.PopupWindow.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<head>
<LINK REL="stylesheet" TYPE="text/css"
HREF="StyleSheet1.css"></LINK>
</head>
<body>
<center>
<form runat="server"
ID="Form1">
<asp:datagrid id="DataGrid1" runat="server" Font-Size="12"
AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn
DataField= "ProductID"
HeaderText= "Product ID"
HeaderStyle-CssClass="HEADERSTYLE"
ItemStyle-CssClass="ITEMSTYLEDEFAULT"
/>
<asp:BoundColumn
DataField="ProductName"
HeaderText="ProductName"
HeaderStyle-CssClass="HEADERSTYLE"
ItemStyle-CssClass="ITEMSTYLEDEFAULT"/>
<asp:hyperlinkcolumn
DataTextFormatString="ShowDetails..."
DataTextField="ProductID"
DataNavigateUrlField="ProductID"
DataNavigateUrlFormatString="javascript:varwin=window.open('WebForm2.aspx?ProductID={0}',null,'width=692,height=25');"
HeaderText="See Details" HeaderStyle-CssClass="HEADERSTYLE"
ItemStyle-CssClass="ITEMSTYLEHYPERLINK" />
</Columns>
</asp:datagrid>
</form>
</center>
</body>
</HTML>
|
| 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 <script></script>
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
|
<%@Page language="c#" AutoEventWireup="false"
Inherits="HowTos.DataGrid.PopupWindow.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Product Details</title>
<LINK REL="stylesheet" TYPE="text/css"
HREF="StyleSheet1.css"></LINK>
</head>
<body>
<asp:DataGrid
HeaderStyle-CssClass="HEADERSTYLE" ItemStyle-CssClass="ITEMSTYLEDEFAULT"
runat="server" id="DataGrid1" Font-Size="8" Height="50"
Width="675"></asp:DataGrid>
<p align="center">
<a href="JavaScript:window.close()">close
window</a>
</p>
</body>
</html>
|
| 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
|
|