ASP.Net Nested GridViews inside GridView show Child GridView on DropDownList Selection

You will have to first add a Class to the Panel. The Class should be your PONumber. Here for my example I have used CustomerId.

    <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" CssClass='<%# Eval("CustomerID") %>' 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>

Then you need to bind CustomerId to the DropDownList

    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem Text="Please select" Value="0"></asp:ListItem>
        <asp:ListItem Text="ALFKI" Value="ALFKI"></asp:ListItem>
        <asp:ListItem Text="ANATR" Value="ANATR"></asp:ListItem>
        <asp:ListItem Text="ANTON" Value="ANTON"></asp:ListItem>
    </asp:DropDownList>

Finally use the following script. It simply finds the Panel using CustomerId and displays it

    <script type="text/javascript">
    $("[id*=DropDownList1]").live("change", function () {
        $("img[src*=minus]").closest("tr").next().remove();
        $("img[src*=minus]").attr("src", "images/plus.png");
        var className = $(this).val();
        var img = $("img", $("." + className).closest("tr"));
        $("." + className).closest("tr").after("<tr><td></td><td colspan = '999'>" + img.next().html() + "</td></tr>");
        img.attr("src", "images/minus.png");
    });

    </script>