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" %>
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >