ASP.NET Using JQuery with nested, editable GridViews with expand/colapse features

Question

One part of my application uses nested GridViews in order to display data. I have clients' orders, and each order consists of 1-or-more products. Now, in order to present data to the user, I used the order data GridView with a button in each row, which allows you to expand/collapse the child Gridview.

When designing this I followed the tutorial presented on this page:

https://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

with some modifications, since my situation is a little bit different (E.g. I don't use a database since data is imported from the external API).

However, the problem is that in the original code the child GridView data is only displayed, while in my solution it has some DropDownLists that allows user to edit the data:

<asp:GridView ID="MainTable" runat="server" OnDataBound="MainTable_DataBound" AutoGenerateColumns="false" OnRowCommand="MainTable_RowCommand" class="w3-table w3-centered">
        <HeaderStyle CssClass="w3-blue" />
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <a class="w3-btn w3-blue button" id="plus">+</a>
                    <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                        <asp:GridView ID="ProductsTable" runat="server" OnRowDataBound="ProductsTable_RowDataBound" AutoGenerateColumns="false" class="w3-table w3-striped">
                            <Columns>
                                <asp:BoundField DataField="Name" HeaderText="Nazwa" />
                                <asp:BoundField DataField="Indexer" Visible="false" />
                                <asp:TemplateField HeaderText="Parametr 1">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList1" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Parametr 2">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList2" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Parametr 3">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList3" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Usuń">
                                    <ItemTemplate>
                                        <a class="w3-btn w3-blue verify">V</a>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="Client" HeaderText="Klient" />
            <asp:BoundField DataField="Phone" HeaderText="Telefon" />
            <asp:BoundField DataField="Comment" HeaderText="Komentarz" />
            <asp:TemplateField HeaderText="Zatwierdź">
                <ItemTemplate>
                    <asp:Button class="w3-btn w3-blue" Text="Zatwierdź" runat="server" CommandName="Verify" CommandArgument="<%# Container.DataItemIndex %>" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Now, the JQuery used in the original code creates a copy of child GridView, which is removed when the user clicks the "-" button. Because of that, I can't access DropDownLists in the code and the changes made by user are not saved. I also found out that the buttons in the child GridView (class .verify) aren't working properly (This, however, might be my fault since I'm not really fluent in JQuery).

$(document).ready(function () {
            $(".button").on("click", function () {
                if ($(this).attr('id') == "plus") {
                    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
                    $(this).html("-");
                    $(this).attr('id', 'minus');
                }
                else {
                    $(this).html("+");
                    $(this).closest("tr").next().remove();
                    $(this).attr('id', 'plus');
                }
            });
            $(".verify").on("click", function () {
                $(this).closest("tr").css("background-color", "#ffffff");
            });
        });

So my question is - how to maintain the current look and page design of the application (opening child GridView outside of the cell), while still being able to access DropDownLists in the code behind? is it possible to do it with JQuery? If not, do you have any other ideas on how to resolve this?

[EDIT] Here are some pics of how it looks:

Answer 1

You can also use hide() instead of remove(). Like so:

 $(this).html("+");
 $(this).closest("tr").next().hide();
 $(this).attr('id', 'plus');