Nested griview ASP.NET C#

See more:

C#

ASP.NET

C#3.5

Gridview

Hi. I am trying to make a nested gridview with plus and minus button. When I click on the button, the gridview does not go to its proper place. Can someone please check if I lack something here.

Here is the javascript that also referes to a jquery script

<link rel="shortcut icon" href="http://server15/DefaultDesign/favicon.png" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function pageLoad() {
            $(function () {
                $("[src*=minus-level1]").each(function () {
                    $(this).closest("tr").after("<tr><td style='border:1px solid #CCC;'></td><td style='border:1px solid #CCC;' colspan = '999999'>" + $(this).next().html() + "</td></tr>");
                    $(this).next().remove()
                });
           
        }

Here is my gridview design

<asp:GridView id="gvTransactionsMain" runat="server" CellPadding="3" AutoGenerateColumns="false" OnRowDataBound="gvTransactions_RowDataBound" Width="1006px"  EmptyDataText="No Transaction found in the database.">
<Columns>
    <asp:TemplateField ItemStyle-Width="16px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
    <ItemTemplate>
         <asp:ImageButton ID="imgLevel1" runat="server" CommandArgument="Show" ImageUrl="~/Images/GridViewButtons/plus-level1.png" Width="16px" Height="16px" OnClick="imgLevel1_Click" />
         <asp:HiddenField ID="hdnTrxNum" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"TrxNum") %>' />
         <asp:Panel ID="pnlLevel1" runat="server" Style="position:relative;" Visible="false">
              <div  style="padding:5px">
              <asp:GridView ID="gvTransactionsDet" runat="server" CellPadding="3" AutoGenerateColumns="false" EmptyDataText="No Transaction found in the database.">
              <Columns>
                     <asp:TemplateField HeaderText="Trx Date" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="Center">
                     <ItemTemplate>
                           <asp:Label ID="lblDate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"TrxDate","{0:MM/dd/yyyy}") %>'></asp:Label>
                           <asp:HiddenField ID="hdnTransNumber" runat="server" Value='<%# Eval("TrxNum") %>' />
                      </ItemTemplate>
                      </asp:TemplateField>
              </Columns>
              </asp:GridView>
</Column>
</asp:GridView>

Here is the imgLevel1_Click event that handles the plus button

protected void imgLevel1_Click(object sender, EventArgs e)
    {
        ImageButton imgShowHide = sender as ImageButton;
        GridViewRow row = imgShowHide.NamingContainer as GridViewRow;

        if (imgShowHide.CommandArgument == "Show")
        {
            imgShowHide.CommandArgument = "Hide";
            imgShowHide.ImageUrl = "~/Images/GridViewButtons/minus-level1.png";
            row.FindControl("pnlLevel1").Visible = true;
        }
        else
        {
            row.FindControl("pnlLevel1").Visible = false;
            imgShowHide.ImageUrl = "~/Images/GridViewButtons/plus-level1.png";
            imgShowHide.CommandArgument = "Show";
        }
    }

What I have tried:

I tried the above codes and it the 2nd level gridview appears on the first column with the plus/minus button.