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"%>
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.BindData () (this.IsPostBack!);} 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 vidinitis () {this.load = new system.Eventhandler (this.page_load);} #ENDREGON}} there
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
