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 asp.net 2010

You are viewing reply posted by: Mudassar on Dec 18, 2013 02:03 AM.
Posted on Dec 18, 2013 02:03 AM

This way

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        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());
            $("#dialog").dialog({
                title: "Selected Row",
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                }
            });
            return false;
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false">
        <Columns>
            <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:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton Text="Select" ID="lnkSelect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <div id="dialog" style="display: none">
        Id: <span id="id"></span>
        <br />
        Name: <span id="name"></span>
        <br />
        Description: <span id="description"></span>
    </div>
    </form>
</body>
</html>

 

 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();
        }
    }

 

using System.Data;