In this article I will explain how to display GridView Row details in New Popup Window using JavaScript and jQuery in ASP.Net.
The new Popup Window will be opened when the HyperLink in GridView row is clicked.
 
Parent Page HTML Markup
The HTML Markup consists of an ASP.Net GridView.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
    <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
    <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
    <asp:BoundField DataField="Description" HeaderText="Description"
        ItemStyle-Width="150" />
    <asp:TemplateField>
        <ItemTemplate>
            <asp:HyperLink ID="lnkView" Text="View" NavigateUrl="javascript:;" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
 
Binding the GridView control
I have created a dynamic DataTable with some dummy data and it has been bind to the GridView control in Page Load event.
Note: You can learn more about this technique in my article Create DataTable dynamically and bind to GridView in ASP.Net
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Description",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
        dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
 
Opening a New Popup Window when HyperLink is clicked in GridView Row
Inside the jQuery document ready event handler, a click event handler is assigned to each HyperLink present in the GridView.
When the HyperLink is clicked, the RowIndex of its Table Row is determined and is passed as QueryString to the Popup page.
Note: ASP.Net GridView is rendered as HTML Table and hence its each row represents TR element and its each cell represents TD element.
 
Finally the Popup page is opened in new Window using JavaScript window.open function.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=lnkView]").click(function () {
        var rowIndex = $(this).closest("tr")[0].rowIndex;
        window.open("Popup.aspx?rowIndex=" + rowIndex, "Popup", "width=350,height=100");
    });
});
</script>
 
 
Popup Page HTML Markup
The following HTML Markup consists of three HTML SPAN elements for displaying the GridView Row details.
<div>
    <u>Details</u>
    <br />
    <br />
    <b>Id:</b> <span id="id"></span>
    <br />
    <b>Name:</b> <span id="name"></span>
    <br />
    <b>Description:</b> <span id="description"></span>
</div>
 
 
Displaying GridView Row details in Popup window
Inside the jQuery document ready event handler, a check is made to make sure that the Parent page is not closed.
The RowIndex of the GridView Row is extracted from the URL QueryString. Using the RowIndex value the GridView Row is referenced using jQuery.
Finally the value of each cell of the GridView Row is displayed in their respective HTML SPAN element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    if (window.opener != null && !window.opener.closed) {
        var rowIndex = window.location.href.split("?")[1].split("=")[1];
        var parent = $(window.opener.document).contents();
        var row = parent.find("[id*=GridView1]").find("tr").eq(rowIndex);
        $("#id").html(row.find("td").eq(0).html());
        $("#name").html(row.find("td").eq(1).html());
        $("#description").html(row.find("td").eq(2).html());
    }
});
</script>
 
 
Screenshot
Display GridView Row details in New Popup Window on HyperLink click using JavaScript and jQuery in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
Downloads
Download Code