Show GridView Selected Row details inside jQuery Dialog Modal Popup in ASP.Net

Last Reply on Dec 18, 2013 02:03 AM By Mudassar

Posted on Dec 18, 2013 01:54 AM

How to show Gridview selected row in popup using Jquery 2010

Posted on Dec 18, 2013 02:03 AM

This way


<html xmlns="">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src=""></script>
    <script src="" type="text/javascript"></script>
    <link href=""
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $("[id*=lnkSelect]").live("click", function () {
            $("#id").html($(".Id", $(this).closest("tr")).html());
            $("#name").html($(".Name", $(this).closest("tr")).html());
            $("#description").html($(".Description", $(this).closest("tr")).html());
                title: "Selected Row",
                buttons: {
                    Ok: function () {
            return false;
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false">
            <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
            <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"
                ItemStyle-Width="150" />
                    <asp:LinkButton Text="Select" ID="lnkSelect" runat="server" />
    <div id="dialog" style="display: none">
        Id: <span id="id"></span>
        <br />
        Name: <span id="name"></span>
        <br />
        Description: <span id="description"></span>


 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;


using System.Data;