Question

With reference to the below mentioned code block (Designer- .ASPX), I am trying here to bind the inner gridview with a List<> at runtime. This List<> for the inner gridview is member of datasource of outer grid.

As you can see from the design, I want to bind the inner gridview with respective datasource only after user clicks on the embedded “+” image button.

I can find the inner gridview at button click but have no idea how to persist datasource for the same. Every column will have it’s own List<> datasource, so I can’t do it with session or view state.

Can anyone let me know how can I persist it with inner gridview and will bind it at runtime after user clicks on “+” sign?

<asp:GridView ID="gvMain" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Lateral">
            <ItemTemplate>
                <asp:CheckBox ID="chkLateral" runat="server" Checked='<%# Eval("Lateral") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Types">
            <ItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:ImageButton OnClick="imgExpandbtn_OnClick" ID="imgExpandbtn" runat="server" ImageUrl="~/Styles/Images/Plus.png" />
                            <asp:Label runat="server" ID="lblTypes" Text='<%# Eval("Types") %>'></asp:Label>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:GridView ID="gvInner" runat="server" AutoGenerateColumns="false">
                </asp:GridView>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Active">     
            <ItemTemplate>
                <%# (Boolean.Parse(Eval("IsActive").ToString())) ? "Y" : "N"%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Answer 1

Are you fetching the data for inner grid along with outer grid? If yes then you should bind the inner grid when you are binding the outer grid i.e. set its data-source at design time using data binding expression. Then you should use java-script to show/hide the inner grid on click of expand/collapse button – not only this approach is simple to implement, it will save server trips on click of expand/collapse button.

Alternatively, you may choose to bind the inner grid only when the expand button is clicked. However, in such case, it does not make sense to pre-fetch & store the inner grid’s data along with outer grid. In such scenario, you should fetch the inner grid’s data when expand button is clicked (so you don’t have to “persist data-source” because data will be fetched on-demand).