I have tried your script when loaded more rows in Gridview, multiple panels are getting open onwards 2nd row button click of gridview.
Please provide solution to resolve the problem.
HTML :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Panel3.aspx.cs" Inherits="pnlCallback.Panel3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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 () {
$('[id*=btnShow]').each(function () {
if ($(this).closest("tr").find('[id*=hfShowPanel]').val() == '1') {
ShowPanel($(this)[0].id)
}
});
});
function ShowPanel(btnShowId) {
var btnShow = $('[id*=' + btnShowId + ']');
var row = $('[id*=' + btnShowId + ']').closest("tr");
$(row).after("<tr><td colspan='999'>" + $('[id*=pnlPopup]').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());
$(btnShow).hide();
};
function ClosePanel(btnClose) {
$(btnClose).closest("tr").prev().find('[id*=hfShowPanel]').val("0");
$(btnClose).closest("tr").prev().find('[id*=btnShow]').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="btnShow" 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>
<asp:Panel ID="pnlPopup" 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>
</form>
</body>
</html>
Code :
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
namespace pnlCallback
{
public partial class Panel3 : System.Web.UI.Page
{
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");
dt.Rows.Add(5, "John Hammond", "United States");
dt.Rows.Add(6, "Mudassar Khan", "India");
dt.Rows.Add(7, "Suzanne Mathews", "France");
dt.Rows.Add(8, "Robert Schidner", "Russia");
dt.Rows.Add(9, "John Hammond", "United States");
dt.Rows.Add(10, "Mudassar Khan", "India");
dt.Rows.Add(11, "Suzanne Mathews", "France");
dt.Rows.Add(12, "Robert Schidner", "Russia");
dt.Rows.Add(13, "John Hammond", "United States");
dt.Rows.Add(14, "Mudassar Khan", "India");
dt.Rows.Add(15, "Suzanne Mathews", "France");
dt.Rows.Add(16, "Robert Schidner", "Russia");
dt.Rows.Add(17, "John Hammond", "United States");
dt.Rows.Add(18, "Mudassar Khan", "India");
dt.Rows.Add(19, "Suzanne Mathews", "France");
dt.Rows.Add(20, "Robert Schidner", "Russia");
dt.Rows.Add(21, "John Hammond", "United States");
dt.Rows.Add(22, "Mudassar Khan", "India");
dt.Rows.Add(23, "Suzanne Mathews", "France");
dt.Rows.Add(24, "Robert Schidner", "Russia");
dt.Rows.Add(25, "John Hammond", "United States");
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.....
}
}
}
