Display nested gridview

I have a nested GridView with 4 levels, when i click in "+" to show child GridView i make request to database to download data of current row, every thing work well for me, the only problem i have is in design, all the child GridView display in column of its parent GridView this is how it looks:

Parent GridView

First Child gridView

here is my aspx code:

    <asp:UpdatePanel ID="upNestedGridView" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
          <asp:GridView ID="gvCostCenters" runat="server" ....>
           <Columns>
             <asp:TemplateField>
               <ItemTemplate>
                 <asp:ImageButton ID="imgShowAccountingPlan" runat="server" OnClick="Show_Hide_AccountingPlansGrid" .../>
                    <asp:Panel ID="pnlAccountingPlan" runat="server" Visible="false" Style="position: relative">
                        <asp:GridView ID="gvAccountingPlans" runat="server" AutoGenerateColumns="false"....">
                          <Columns>
                             <asp:TemplateField>                                 
                                <ItemTemplate>
                                   <asp:ImageButton ID="imgShowPrograms" runat="server" OnClick="Show_Hide_ProgramsGrid" .../>
                                   <asp:Panel ID="pnlPrograms" runat="server" Visible="false" Style="position: relative">
                                       <asp:GridView ID="gvPrograms" runat="server" AutoGenerateColumns="false" ...>
                                            <Columns>
                                                <asp:TemplateField>
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="imgShowProjects" runat="server" OnClick="Show_Hide_ProjectsGrid" ..../>
                                                        <asp:Panel ID="pnlProjects" runat="server" Visible="false" Style="position: relative">
                                                            <asp:GridView ID="gvProject" runat="server" ....>
                                                                .....
                                                            </asp:GridView>
                                                        </asp:Panel>
                                                    </ItemTemplate>
                                                </asp:TemplateField>                                                                              
                                                <asp:BoundField DataField="Label" HeaderText="البند " ItemStyle-HorizontalAlign="Right" />
                                                ....
                                            </Columns>
                                        </asp:GridView>
                                    </asp:Panel>
                                </ItemTemplate>
                             </asp:TemplateField>                                                          
                             <asp:BoundField DataField="NumAccountingPlan" HeaderText="الخطة المحاسبية " ItemStyle-HorizontalAlign="Right" />
                             ...
                         </Columns>
                    </asp:GridView>
                 </asp:Panel>
            </ItemTemplate>
         </asp:TemplateField>
         ...
        <asp:BoundField DataField="OperatingExpenses" HeaderText="المصروفات التشغيلية" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
    </Columns>
</asp:GridView>

my jquery code:

<script type="text/javascript">
    $(function () {
        $("[src*=minus]").each(function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
            $(this).next().remove()
        });
    });
</script>

My code C#:

protected void Show_Hide_AccountingPlansGrid(object sender, EventArgs e)
    {
        try
        {
            ServiceClass service = new ServiceClass();
            ImageButton imgShowHide = (sender as ImageButton);
            GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
            if (imgShowHide.CommandArgument == "Show")
            {

                _budget = service.GetBudgetById(int.Parse(hfIdBudget.Value));
                row.FindControl("pnlAccountingPlan").Visible = true;
                imgShowHide.CommandArgument = "Hide";
                imgShowHide.ImageUrl = "/Content/img/minus.gif";
                string idCostCenter = gvCostCenters.DataKeys[row.RowIndex].Value.ToString();
                GridView gvAccountingPlans = row.FindControl("gvAccountingPlans") as GridView;
                //gvAccountingPlans.ToolTip = costCenterId;
                gvAccountingPlans.DataSource = AccountingPlanData(int.Parse(hfIdUser.Value), int.Parse(hfIdBudget.Value), int.Parse(idCostCenter));
                gvAccountingPlans.DataBind();

            }
            else
            {
                row.FindControl("pnlAccountingPlan").Visible = false;
                imgShowHide.CommandArgument = "Show";
                imgShowHide.ImageUrl = "/Content/img/plus.gif";
            }
        }
        catch (Exception ex) { GlobalHelpers.Trace(ex); }
    }

I notice that when i delete the UpdatePanel the first child GridView display well, but the others no. How can i do to display all childs GridView well?

I'm sorry for my bad english