Datagrid|perl 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 a example illustrating how to make a hyperlinkcolumn in a DataGrid spawn Eve NTS that would pops up a new window with the details of the ' row that ' the user clicked on. Before we could anwser his email him had already emailed us back explaining so he had found a way to do it and suggested A tutorial of his discovery. So, here it is! As with most of we articles, this simplifies the task, but easy examples of coding techniques is what gives-developers ID EAS for more complex senerios.
This example contains two WebForms and one external style sheet (all code are included in the download)-The one 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 the product the "user wants the details for." In the second webform there are another DataGrid that shows the user all the details for the chosen product. The stylesheet is used just because it cleaner to use than inline. 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>
<link rel= "stylesheet" type= "Text/css" href= "Stylesheet1.css" ></LINK>
<body>
<center>
<form runat= "Server" id= "Form1" >
<asp:datagrid id= "DATAGRID1" runat= "Server" font-size= "" "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=" headerstyle-cssclass= "HeaderStyle" itemstyle-cssclass= "Itemstylehyperlink"/>
In fact, as long as the whole article to see a sentence on it ... It's the eye of the eye.
</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 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 this except for the details of datanavigateurlformatstring you ' ll notic E-I actually have JavaScript window.open directly in it (NOTE:I-could have just as easily created an external. js fi Le 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'll 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" >
<title>product details</title>
<link rel= "stylesheet" type= "Text/css" href= "Stylesheet1.css" ></LINK>
<body>
<asp:datagrid headerstyle-cssclass= "HeaderStyle" itemstyle-cssclass= "Itemstyledefault" runat= "Server" id= " DataGrid1 "font-size=" 8 "height=" width= "675" ></asp:DataGrid>
<p align= "center" >
<a href= "JavaScript:window.close ()" >close window</a>
</p>
</body>
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 the 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 this resides on the page is a DataGrid which are 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 in the CSS (cascading Style Sheet) file and then below that contains a figure illustrating x when it is the 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;
}
