In this commodity I will explain how to display GridView Row details in New Popup Window using JavaScript and jQuery in ASP.Internet.

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 ="Proper noun" ItemStyle-Width ="150" />

< asp : BoundField DataField ="Clarification" 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

Yous will need to import the following namespace.

C#

Binding the GridView control

I have created a dynamic DataTable with some dummy information and it has been bind to the GridView control in Page Load event.

C#

protected void Page_Load(object sender, EventArgs due east)

{

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("Clarification",typeof(string)) });

        dt.Rows.Add(i, "John Hammond", "Works every bit a scientist in USA.");

        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net developer 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 upshot handler is assigned to each HyperLink nowadays 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 chemical element.

Finally the Popup folio is opened in new Window using JavaScript window.open up part.

< script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/i.8.three/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,tiptop=100");

    });

});

</ script >

Popup Page HTML Markup

The following HTML Markup consists of iii 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 certain that the Parent page is not airtight.

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 corresponding HTML Span element.

< script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/i.viii.3/jquery.min.js"></ script >

< script type="text/javascript">

$(function () {

if (window.opener != null && !window.opener.closed) {

var rowIndex = window.location.href.split("?")[1].separate("=")[ane];

var parent = $(window.opener.document).contents();

var row = parent.discover("[id*=GridView1]").observe("tr").eq(rowIndex);

        $("#id").html(row.find("td").eq(0).html());

        $("#proper noun").html(row.find("td").eq(1).html());

        $("#description").html(row.find("td").eq(two).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 post-obit browsers.

Internet Explorer FireFox Chrome Safari Opera

* All browser logos displayed in a higher place are property of their respective owners.

Demo

Downloads