Nested grid does not stay expanded after insertion

Question

I have a nested grid staying in the expanded state after an insertion. I thought I could just apply the same logic in the PageIndexChanging event and it would work there also. But it is not. THis is my markup for my nested grid:

<div id="div<%# Eval("GroupID") %>" style="display:none">
                    <asp:UpdatePanel ID="updatePnlNestedGrid" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                    <asp:GridView ID="GroupMemberGridView" runat="server" AutoGenerateColumns="false" OnRowDeleting="GroupMemberGridView_RowDeleting" 
                         OnRowCommand="GroupMemberGridView_RowCommand" CssClass="grid" ShowFooter="true" AllowPaging="true" PageSize="5"
                          onpageindexchanging="GroupMemberGridView_PageIndexChanging">
                        <Columns>
                            <asp:TemplateField HeaderText="MemberID">
                                <ItemTemplate>
                                    <asp:Label ID="mggvLblMemberID" runat="server" Text='<%# Bind("MemberID") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Member Name" ItemStyle-Wrap="false"> 
                                <ItemTemplate>
                                    <asp:Label ID="mggvLblMemberName" runat="server" Text='<%# Bind("MemberName") %>'></asp:Label>
                                </ItemTemplate>               
                                <FooterTemplate>
                                    <asp:DropDownList ID="mggvDDLMemberName" runat="server" 
                                       class="chosen-single" data-placeholder="Choose member…">
                                    </asp:DropDownList>
                                    <asp:RequiredFieldValidator ID="ReqValueDDLMemberInsert" runat="server" InitialValue="0" 
                                            ControlToValidate="mggvDDLMemberName" 
                                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                                    </asp:RequiredFieldValidator>
                                </FooterTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Active Device(s)">                   
                                <ItemTemplate>
                                    <asp:Label ID="mggvLblActiveDevice" runat="server" Text='<%# (Boolean.Parse(Eval("ActiveDevice").ToString())) ? "Yes" : "No" %>'></asp:Label>
                                </ItemTemplate>                   
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Action" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <asp:Button ID="mggvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete" 
                                        Text="Delete" CssClass="gridActionbutton"  OnClientClick="return confirm('Are you sure you want to delete this Group Member?')" >
                                    </asp:Button>
                                </ItemTemplate>                                     
                                <FooterTemplate>
                                    <asp:Button ID="mggvAddButton" runat="server" CommandName="Add" Text="Add Member" Width="90%" 
                                        CssClass="gridActionbutton"/> 
                                </FooterTemplate>
                            </asp:TemplateField>
                        </Columns>
                        <EmptyDataTemplate>
                            <tr>
                                <th>MemberID</th>
                                <th>Member Name</th>
                                <th>Active Device(s)</th>
                                <th>Action</th>
                            </tr>
                            <tr>
                                <td colspan="4" style="text-align:center;">
                                     No group members are part of this group. A group member can be added by clicking the 'Add Member' Button.
                                </td>    
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <asp:DropDownList ID="mggvDDLMemberName" runat="server" ClientIDMode="Static" 
                                       class="chosen-single" data-placeholder="Choose member…">
                                    </asp:DropDownList>
                                    <asp:RequiredFieldValidator ID="ReqValueDDLMemberInsertEmpty" runat="server" InitialValue="0" 
                                           ControlToValidate="mggvDDLMemberName" ValidationGroup="InsertGroupMemberValidationEmpty" 
                                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                                    </asp:RequiredFieldValidator>    
                                </td>
                                <td></td>
                                <td>
                                    <asp:Button ID="mggvAddButtonEmpty" runat="server" CommandName="Add" Text="Add Member" Width="90%" CausesValidation="true" 
                                        CssClass="gridActionbutton" ValidationGroup="InsertGroupMemberValidationEmpty">
                                    </asp:Button>
                                </td>
                            </tr>
                        </EmptyDataTemplate>
                    </asp:GridView>
                    </ContentTemplate>
                    </asp:UpdatePanel>
                </div>

This is the javascript function that I call in my code-behind to expand the nested grid:

 function ExpandGrid(groupID) {             
            var div = document.getElementById(groupID);
            var img = document.getElementById('img' + groupID);
            div.style.display = "inline";
            img.src = "Images/minus.png";
            $(div + ".chosen-single").chosen("destroy");
            $(div + ".chosen-single").chosen({
                search_contains: true,
                width: "100%",
                no_results_text: "Sorry, no match!"
            });
        }

In the Add Command, I call this script and the nested grid remains expanded after an insertion and deletion:

 protected void GroupMemberGridView_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        try
        {
            if (e.CommandName.Equals("Add"))
            {                 
                //Get the Footer controls that have the new entry data
                GridView tgvGroupMember = (GridView)sender;
                Control tFooterControls = CommonMethods.getFooterControls(tgvGroupMember);
                int tiMemberID = Convert.ToInt32((tFooterControls.FindControl("mggvDDLMemberName") as DropDownList).SelectedItem.Value);
                int tiGroupID = Convert.ToInt32((tgvGroupMember.Parent.FindControl("uggvLblGroupID") as Label).Text);

                //Insert into the database
                m_pagingClient.InsertGroupMember(tiGroupID, tiMemberID);

                //Rebind the grid with the new data
                populateGroupGrid();

                UpdatePanel updatePnl = (UpdatePanel)tgvGroupMember.Parent.FindControl("updatePnlNestedGrid");
                string strJavascriptFnCall = "ExpandGrid(" + tiGroupID.ToString() + ");";
                ScriptManager.RegisterStartupScript(updatePnl, updatePnl.GetType(), "ExpandGrid", strJavascriptFnCall, true);        
            }
        }
        catch (Exception ex)
        {
            logger.ErrorException(ex.Message, ex);
            Response.Redirect("~/Error.aspx?use=" + m_strUserType);
        }
    }

I want to keep the nested grid open after the PageIndexChanging event, but the grid collapses after this event is fired.

 protected void GroupMemberGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        try
        {
            GridView tgvGroupMember = (GridView)sender;
            tgvGroupMember.PageIndex = e.NewPageIndex;
            int tiGroupID = Convert.ToInt32((tgvGroupMember.Parent.FindControl("uggvLblGroupID") as Label).Text);

            populateGroupMemberGrid(tgvGroupMember, tiGroupID);

            Control tFooterControls = CommonMethods.getFooterControls(tgvGroupMember);
            DropDownList tddlRecipientNames = tFooterControls.FindControl("mggvDDLMemberName") as DropDownList;
            m_strXmlTableData = m_pagingClient.GetAllPossibleGroupMembers(m_strUserID, tiGroupID);
            DataTable tdtAllGroupMembers = CommonMethods.ParseXML(m_strXmlTableData);
            tddlRecipientNames.DataSource = tdtAllGroupMembers;
            tddlRecipientNames.DataTextField = tdtAllGroupMembers.Columns["MemberName"].ToString();
            tddlRecipientNames.DataValueField = tdtAllGroupMembers.Columns["MemberID"].ToString();
            tddlRecipientNames.ValidationGroup = "InsertMember" + tiGroupID.ToString();
            tddlRecipientNames.DataBind();
            tddlRecipientNames.Items.Insert(0, new ListItem("", "0"));//This is needed for the jquery-chosen dropdown to add data-holder text

            RequiredFieldValidator validator = (RequiredFieldValidator)tFooterControls.FindControl("ReqValueDDLMemberInsert");
            validator.ControlToValidate = ((DropDownList)tFooterControls.FindControl("mggvDDLMemberName")).GetUniqueIDRelativeTo(validator);
            validator.ErrorMessage = "Selection required.";
            validator.CssClass = "message-error-dropdown";
            validator.ValidationGroup = "InsertMember" + tiGroupID.ToString();

            Button tbtnAdd = tFooterControls.FindControl("mggvAddButton") as Button;
            tbtnAdd.ValidationGroup = "InsertMember" + tiGroupID.ToString();
            tbtnAdd.CausesValidation = true;

            UpdatePanel updatePnl = (UpdatePanel)tgvGroupMember.Parent.FindControl("updatePnlNestedGrid");
            string strJavascriptFnCall = "ExpandGrid(" + tiGroupID.ToString() + ");";
            ScriptManager.RegisterStartupScript(updatePnl, updatePnl.GetType(), "ExpandGrid", strJavascriptFnCall, true);                   
        }
        catch (Exception ex)
        {
            logger.ErrorException(ex.Message, ex);
            Response.Redirect("~/Error.aspx?use=" + m_strUserType);
        }
    }

Why doesn't the nested grid remain expanded after the Index Changing event but it does remain expanded after the 'Add' event?

Thanks.

Answer 1

I got my nested grid to remain expanded after paging. This is how I fixed it... First, I removed Sys.WebForms.PageRequestManager.getInstance().add_endRequest from the javascript so that the function looked like this:

function ExpandGrid(groupID) {
        var div = document.getElementById(groupID);
        alert("groupID: " + groupID + " div: " + div);
        var img = document.getElementById('img' + groupID);
        div.style.display = "inline";
        img.src = "Images/minus.png";
        $(div + ".chosen-single").chosen("destroy");
        $(div + ".chosen-single").chosen({
            search_contains: true,
            width: "100%",
            no_results_text: "Sorry, no match!"
        });

Then within the PageIndexChanged I correctly named the parameter and surrounded it in single quotes:

string strJavascriptFnCall = "ExpandGrid('div" + tiGroupID.ToString() + "')";

Finally, I put the UpdatePanel outside the div, not inside it as shown above.

That got it to work. I hope this can help someone.