ASP.NET Expand grid view

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

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"

    DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound">

    <Columns>

        <asp:TemplateField>

            <ItemTemplate>

                <img alt = "" style="cursor: pointer" src="images/plus.png" />

                <asp:Panel ID="pnlOrders" runat="server" Style="display: none">

                    <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">

                        <Columns>

                            <asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />

                            <asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />

                        </Columns>

                    </asp:GridView>

                </asp:Panel>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />

        <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />

    </Columns>

</asp:GridView>

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        gvCustomers.DataSource = GetData("select top 10 * from Customers");

        gvCustomers.DataBind();

    }

}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

        string customerId = gvCustomers.DataKeys[e.Row.RowIndex].Value.ToString();

        GridView gvOrders = e.Row.FindControl("gvOrders") as GridView;

        gvOrders.DataSource = GetData(string.Format("select top 3 * from Orders where CustomerId='{0}'", customerId));

        gvOrders.DataBind();

    }

}

 

 

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    $("[src*=plus]").live("click", function () {

        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")

        $(this).attr("src", "images/minus.png");

    });

    $("[src*=minus]").live("click", function () {

        $(this).attr("src", "images/plus.png");

        $(this).closest("tr").next().remove();

    });

</script>

 Reference : http://littleprograming.blogspot.com/search/?q=nested+grid