nested gridview does not stay expanded after pageindexchanging - asp.net

Question

I have a nested gridview that I would like it to stay expanded after the user clicks one of the paging values. I found an example on the web but it is not working for me.
If anyone can see where I am going wrong, I would appreciate it.
This is my JavaScript function that expands/hides the nested grid. It works fine. This is also where I set my hidden value to identify the which grid is expanded.
function DivExpandCollapse(RecipientID) {
var div = document.getElementById(RecipientID);
var img = document.getElementById('img' + RecipientID);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "Images/minus.png";
$("#recdevgvIsExpanded").val("1");
} else {
div.style.display = "none";
img.src = "Images/plus.png";
$("#recdevgvIsExpanded").val("");
}
}
This function identifies the grid to expand and should expand it.
It gets into the if statement and the recipientID is correct.
I build the id of the div and img elements to set them.
$(document).ready(function () {
$("[id*=recdevgvIsExpanded]").each(function () {
if ($(this).val() == "1") {
var div = $(this).parent().closest("div");
$tds = div.find("td");
var recipientID = $tds.siblings(":first").text();
var div2 = document.getElementById('div' + recipientID);
var img = document.getElementById('imgdiv' + recipientID);
div2.style.display = "inline";
img.src = "Images/minus.png";
}
});
});
This is the code behind that goes thru the grid rows to set the Expanded value. It also sets the correct nested grid to be 'expanded'.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Get Recipient Info from Database
populateRecipientInfoGrid();
}//end if IsPostBack
//For Re expanding the expanded rows
foreach (GridViewRow row in RecipientInfoGridView.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
HiddenField IsExpanded = row.FindControl("recdevgvIsExpanded") as HiddenField;
IsExpanded.Value = Request.Form[IsExpanded.UniqueID];
}
}
}
This is the PageIndexChanging event. It correctly updates the data.
protected void RecipientDeviceGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView tgvRecipientDevice = (GridView)sender;
tgvRecipientDevice.PageIndex = e.NewPageIndex;
int tiRecipientID = Convert.ToInt32((tgvRecipientDevice.Parent.FindControl("rigvLblRecipientID") as Label).Text);
populateDeviceGrid(tgvRecipientDevice, tiRecipientID);
}
This is the markup
<asp:GridView ID="RecipientInfoGridView" runat="server"
AllowPaging="True"
PageSize="10"
AutoGenerateColumns="False"
Caption="Recipient Information"
CaptionAlign="Top"
CssClass="grid"
HorizontalAlign="Left"
ShowFooter="True"
ShowHeaderWhenEmpty="True"
DataKeyNames="RecipientID"
OnPageIndexChanging="RecipientInfoGridView_PageIndexChanging">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:DivExpandCollapse('div<%# Eval("RecipientID")%>');">
<img id="imgdiv<%# Eval("RecipientID")%>" alt=""
width="25px" border="0" src="Images/plus.png" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="RecipientID">
<ItemTemplate>
<asp:Label ID="rigvLblRecipientID" runat="server"
Text='<%# Bind("RecipientID") %>'
ClientIDMode="Static">
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<tr>
<td colspan="100%">
<div id="div<%# Eval("RecipientID") %>" style="display: none">
<asp:GridView ID="RecipientDeviceGridView" runat="server"
AutoGenerateColumns="false"
CssClass="grid"
ShowFooter="true"
Caption="Device Information"
CaptionAlign="Top"
AllowPaging="true"
PageSize="1"
HorizontalAlign="Left"
OnPageIndexChanging="RecipientDeviceGridView_PageIndexChanging">
<Columns>
<asp:TemplateField HeaderText="DeviceID">
<ItemTemplate>
<asp:Label ID="recdevgvLblDeviceID" runat="server"
Text='<%# Bind("DeviceID") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Device" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label ID="recdevgvLblDeviceName" runat="server"
Text='<%# Bind("DeviceName") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service Provider">
<ItemTemplate>
<asp:Label ID="recdevgvLblServiceName" runat="server"
Text='<%# Bind("ServiceName") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="recdevgvLblAddress" runat="server"
Text='<%# Bind("Address") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Active">
<ItemTemplate>
<asp:Label ID="recdevgvLblActive" runat="server"
Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action"
ShowHeader="False"
ItemStyle-Wrap="false"
ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="recdevgvEditButton" runat="server"
CausesValidation="True"
CommandName="Edit"
Text="Edit"
CssClass="gridActionbutton"
ValidationGroup="EditDeviceValidation">
</asp:Button>
<asp:Button ID="recdevgvDeleteButton" runat="server"
CausesValidation="False"
CommandName="Delete"
Text="Delete"
CssClass="gridActionbutton"
OnClientClick="return confirm('Are you sure you want to delete this Device Information?')">
</asp:Button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:HiddenField ID="recdevgvIsExpanded" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
If anyone can give me any guidance as to how to accomplish a nested grid to remain expanded after the PageIndexChanging event, I would appreciate it.
Thanks.
UPDATE
I have the nested grid staying open but it is always the first nested grid with opens after the PageIndexChanging regardless of which row I click. The problem is that the Hidden field has the same ID for each row. Using the 'alert' method and viewing the UniqueId in the code behind. The hidden field is always the first row.
Where should the Hidden field be? According to some code I found on the web it is after the 'div' and before the ItemTemplate at the end of the nested grid. Is there another place it should be?
UPDATE
I am not identifying the hidden field correctly. It is in the correct location, I believe.
This is my javascript function:
function DivExpandCollapse(RecipientID) {
var div = document.getElementById(RecipientID);
var img = document.getElementById('img' + RecipientID);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "Images/minus.png";
$("#recdevgvIsExpanded").val("1");
var hiddenName = $("#recdevgvIsExpanded").attr("name");
alert(hiddenName + " expanded");
}
else {
div.style.display = "none";
img.src = "Images/plus.png";
$("#recdevgvIsExpanded").val("");
}
I need to ID the hidden field associated with the 'div' and 'img'. How do I do that?

Answer 1

Your grid is not inside an UpdatePanel, so every time you change the index is generating a full post, that means the entire page is re created, you need to put the grid inside an update panel, also add a ScriptManager, after that you need to write a JS function that expands the grid when the script manager request is finished (Sounds like a lot of work, but is actually not)
//example
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
function()
{
//here you'll expand the grid
});
Some documentation regarding the update panel control:
https://msdn.microsoft.com/en-us/library/bb399001(v=vs.140).aspx
https://msdn.microsoft.com/en-us/library/bb386452(v=vs.140).aspx

Answer 2

Update Panel did not work for me. I used PlaceHolder with literals which helped me but caused css issues.
But following code fixed my issue.
Hope this might help anyone facing the issue where update panels doesnt work.
$(function () {
$("[src*=minus]").each(function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).next().remove()
});
});
Aspx code:
<asp:GridView ID="gv_Parent" AutoGenerateColumns="False"
DataKeyNames="Id" Font-Size="12px" Width="100%" runat="server"
AllowPaging="true" PageSize="10" OnPageIndexChanging="OnPageIndexChanging">
<Columns>
<asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_ChildGrid"
ImageUrl="../../../assets/img/plus.png" CommandArgument="Show" />
<asp:Panel ID="pnlOrders" runat="server" Visible="false" Style="position:
relative">
<div id="divgvTargetInfo" runat="server" class="table-responsive">
<asp:GridView ID="gvChild" AutoGenerateColumns="False"
DataKeyNames="Id" runat="server"
OnPageIndexChanging="OnTargetPageIndexChanging" AllowPaging="true"
pagesize="10">
<Columns>
</columns>
</asp:GridView> --closing Child Grid
</asp:Panel>
</columns>
</asp:GridView> --closing Parent Grid
Code Behind:
protected void Show_Hide_ChildGrid(object sender, EventArgs e)
{
ImageButton imgShowHide = (sender as ImageButton);
GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
if (imgShowHide.CommandArgument == "Show")
{
row.FindControl("pnlOrders").Visible = true;
mgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "../../../assets/img/minus.png";
GridView gvwChild = row.FindControl("gvChild") as GridView;
BindChildGrid(Convert.ToInt32(gv_Parent.DataKeys[row.RowIndex].Value),
gvwChild);
}
else
{
row.FindControl("pnlOrders").Visible = true;
imgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "../../../assets/img/minus.png";
GridView gvwChild = row.FindControl("gvChild") as GridView;
BindchildGrid(Convert.ToInt32(gv_Parent.DataKeys[row.RowIndex].Value),
gvwChild);
}
}
else
{
row.FindControl("pnlOrders").Visible = false;
mgShowHide.CommandArgument = "Show";
mgShowHide.ImageUrl = "../../../assets/img/plus.png";
}
}
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
gv_Parent.PageIndex = e.NewPageIndex;
this.BindGVTSPBA();
}
protected void OnTargetPageIndexChanging(object sender,
GridViewPageEventArgs e)
{
GridViewRow gvRowParent = (((GridView)sender)).DataItemContainer as
GridViewRow;
GridView gvwChild = ((GridView)sender);
gvwChild.PageIndex = e.NewPageIndex;
BindChildGrid
(Convert.ToInt32(gv_Parent.DataKeys[gvRowParent.RowIndex].Value),
gvwChild);
}