Display GridView Row details inside Panel control within GridView in ASP.Net

Here I have created sample that will help you out,

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowPanel(btnAttendId) {
            var btnAttend = $('[id$=' + btnAttendId + ']');
            var row = $('[id$=' + btnAttendId + ']').closest("tr");
            $(row).after("<tr><td colspan='999'>" + $('[id*=pnlTab]').html() + "</td></tr>");
            $(row).next().find('[id*=lblId]').html($("td", row).eq(0).html());
            $(row).next().find('[id*=lblName]').html($("td", row).eq(1).html());
            $(row).next().find('[id*=lblCountry]').html($("td", row).eq(2).html());
            $(btnAttend).hide();
            return false;
        };

        $(function () {
            var i = 0;
            $('[id*=hfShowPanel]').each(function () {
                if ($(this).val() == 1) {
                    i++;
                }
            });
            if (i > 1) {
                ShowPanel($('[id*=hfLastPanel]').val());
                alert('Please close already opened panel');

            } else {
                $('[id*=btnAttend]').each(function () {
                    if ($(this).closest("tr").find('[id*=hfShowPanel]').val() == '1') {
                        ShowPanel($(this)[0].id)
                        $('[id*=hfLastPanel]').val($(this)[0].id);
                    }
                });
            }
        });

        function ClosePanel(btnClose) {
            $('[id*=btnAttend]').each(function () {
                if ($(this).closest("tr").find('[id*=hfShowPanel]').val() == '1') {
                    $(this).closest("tr").find('[id*=hfShowPanel]').val("0");
                }
            });
            $(btnClose).closest("tr").prev().find('[id*=btnAttend]').show();
            $(btnClose).closest("tr").remove();
        }
    </script>
    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        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="Country" HeaderText="Country" ItemStyle-Width="150" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button ID="btnAttend" ValidationGroup="CommentValid" Text="Attend Call" CssClass="btn btn-warning"
                        runat="server" OnClick="btnShow_Click" />
                    <input type="hidden" id="hfShowPanel" runat="server" value="0" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <input type="hidden" id="hfLastOpenedPanel" value="" />
    <asp:HiddenField ID="hfLastPanel" runat="server" />
    <asp:Panel ID="pnlTab" runat="server" CssClass="modalPopup" Style="display: none">
        <div class="header">
            Details
        </div>
        <br />
        <div class="body">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td style="width: 60px">
                        <b>Id: </b>
                    </td>
                    <td>
                        <asp:Label ID="lblId" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Name: </b>
                    </td>
                    <td>
                        <asp:Label ID="lblName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Country: </b>
                    </td>
                    <td>
                        <asp:Label ID="lblCountry" runat="server" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="footer" align="right">
            <asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" OnClientClick="return ClosePanel(this)" />
        </div>
    </asp:Panel>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void btnShow_Click(object sender, EventArgs e)
{
    Button btnShow = (sender as Button);
    GridViewRow row = (GridViewRow)btnShow.NamingContainer;
    HtmlInputHidden hf = ((HtmlInputHidden)row.FindControl("hfShowPanel"));
    hf.Value = "1";
    // Write here your code.....
}

Screenshot