Show Gridview inside a Gridview

Question

I have a gridview with 2 columns ([+] and [data]). On click of [+] sign it opens a girdview inside the same gridview.

Now, in child gridview I have a link button, on click of that I display some data. On postback the gridview retains its original position, I want to show the child gridview as it is.

Code.

<asp:GridView ID="grvNeverTouchedQuartile" class="form-table" Width="100%" OnRowCommand="grvNeverTouchedQuartile_RowCommand"
                                                                AutoGenerateColumns="false" runat="server" OnRowDataBound="grvNeverTouchedQuartile_RowDataBound"
                                                                DataKeyNames="QuartileType">
                                                                <Columns>
                                                                    <asp:TemplateField>
                                                                        <ItemTemplate>
                                                                            <%--<asp:LinkButton ID="lnkbtnNTQuartile" runat="server" Text='<%# Eval("Quartile") %>'
                                                                        CommandArgument='<%# Eval("QuartileType") %>' CommandName="NeverTouched"></asp:LinkButton>--%>
                                                                            <img alt="Image not available" style="cursor: pointer" src="../images/plus.png" />
                                                                            <asp:Panel ID="pnl_NTChildGrid" runat="server" Style="display: none">
                                                                                <table>
                                                                                    <tr>
                                                                                        <td>
                                                                                            <div style="overflow: auto;">
                                                                                                <asp:GridView ID="grdNTInsuranceData" runat="server" AutoGenerateColumns="false" OnRowCommand="grdNTInsuranceData_RowCommand">
                                                                                                    <Columns>
                                                                                                        <asp:TemplateField HeaderText="Insurance Name">
                                                                                                            <ItemTemplate>
                                                                                                                <asp:Label ID="lblNTQuartileType" runat="server" Text='<%# Eval("QuartileType") %>' Visible="false"></asp:Label>
                                                                                                                <asp:Label ID="lblNTInsuranceName" runat="server" Text='<%# Eval("InsuranceName") %>' Visible="false"></asp:Label>
                                                                                                                <asp:LinkButton ID="lnkbtnNTInsuranceQuartile" runat="server" Text='<%# Eval("InsuranceNameDetails") %>'
                                                                                                                    CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="NeverTouchedInsurance"></asp:LinkButton>
                                                                                                            </ItemTemplate>
                                                                                                        </asp:TemplateField>
                                                                                                    </Columns>
                                                                                                </asp:GridView>
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>
                                                                            </asp:Panel>
                                                                        </ItemTemplate>
                                                                    </asp:TemplateField>
                                                                    <asp:TemplateField HeaderText="Quartile[Count - $Value]">
                                                                        <ItemTemplate>
                                                                            <asp:Label ID="lblNTQuartile" runat="server" Text='<%# Eval("Quartile") %>'></asp:Label>
                                                                            <%--<asp:LinkButton ID="lnkbtnNTQuartile" runat="server" Text='<%# Eval("Quartile") %>'
                                                                        CommandArgument='<%# Eval("QuartileType") %>' CommandName="NeverTouched"></asp:LinkButton>--%>
                                                                        </ItemTemplate>
                                                                    </asp:TemplateField>
                                                                </Columns>
                                                            </asp:GridView>

Thanks in Advance!!!

Answer 1

There are some ways (This is not with code it is just my suggestions, there are codes over internet or it is based on experience) so in my opinion you can use one of below cases:

1- You should use UpdatePanel to prevent refreshing page and put the grid inside UpdatePanel , just for sample like below:

<asp:UpdatePanel ID="panelId" UpdateMode="Conditional" runat="server"  >
    <ContentTemplate>
     <asp:GridView ID="gvPrList" runat="server" AutoGenerateColumns="false" AllowPaging="false"
           AllowSorting="false" CssClass="list-table" HeaderStyle-CssClass="header">
           <Columns>
         <ItemTemplate>
                    <asp:LinkButton ID="lnkbtnNTInsuranceQuartile" runat="server" Text='<%# Eval("InsuranceNameDetails") %>'
                                                                                                                   CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="NeverTouchedInsurance"></asp:LinkButton>
               </ItemTemplate>
           </asp:TemplateField>
       </Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

2- the runat of lnkbtnNTInsuranceQuartile is server which main after it's click post-back will be occurred so page get refreshed for this you can change your lnkbtnNTInsuranceQuartile to HTML element such as <div><a class="x">click here</a><span class="detail"/></div> and then instead of lnkbtnNTInsuranceQuartile click use ajax and then update details Span something like :

    $('.x').click(function () {
    var $me = this;
    $.ajax({
        url: 'Your Web Method address',
        data: { youData},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //update span here
            $me.parent().find('.details.'.html(your response);
        },
        error: function (x, e) { 
        }
    });
});

3- Use client-side Grid not ASP.Net GridView

4- Add collapsed th 's id into localstorage and after page load open it again...

5- etc...

all three above steps can be implemented based on your scenario...

Hope will help you