Populate multi level nested GridView in ASP.Net using C# and VB.Net

Hi baswal07,

Refer below code.

HTML

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
            DataKeyNames="CustomerID" OnRowDataBound="OnCustomerRowDataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <img alt="" style="cursor: pointer" src="images/plus.png" class="order_details" />
                        <img alt="" style="cursor: pointer; display: none" src="images/minus.png" />
                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                            <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" DataKeyNames="OrderId"
                                CssClass="ChildGrid" OnRowDataBound="OnOrderRowDataBound">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <img alt="" style="cursor: pointer" src="images/plus.png" class="product_details" />
                                            <img alt="" style="cursor: pointer; display: none" src="images/minus.png" />
                                            <asp:Panel ID="pnlProducts" runat="server" Style="display: none">
                                                <asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="false" CssClass="Nested_ChildGrid">
                                                    <Columns>
                                                        <asp:BoundField ItemStyle-Width="150px" DataField="ProductId" HeaderText="Product Id" />
                                                        <asp:BoundField ItemStyle-Width="150px" DataField="ProductName" HeaderText="Product Name" />
                                                    </Columns>
                                                </asp:GridView>
                                            </asp:Panel>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <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 DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "[src*=plus]", function () {
        if ($(this).attr('class') == "order_details") {
            $(this).closest("tr").after("<tr><td></td><td class='orders' colspan = '999'>" + $(this).closest("tr").find("[id*=Orders]").html() + "</td></tr>");
        }
        if ($(this).attr('class') == "product_details") {
            $(this).closest("tr").after("<tr><td></td><td class='products' colspan = '999'>" + $(this).closest("tr").find("[id*=Products]").html() + "</td></tr>");
        }
        $(this).closest("tr").find("[src*=minus]").show();
        $(this).hide();
    });
    $("body").on("click", "[src*=minus]", function () {
        $(this).closest("tr").next().remove();
        $(this).closest("tr").find("[src*=plus]").show();
        $(this).hide();
    });
</script>

Namespace

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        gvCustomers.DataSource = GetData("SELECT TOP 10 * FROM Customers");
        gvCustomers.DataBind();
    }
}

private static DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

protected void OnCustomerRowDataBound(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();
    }
}

protected void OnOrderRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string orderId = (sender as GridView).DataKeys[e.Row.RowIndex].Value.ToString();
        GridView gvProducts = e.Row.FindControl("gvProducts") as GridView;
        gvProducts.DataSource = GetData(string.Format("SELECT ProductId, ProductName FROM Products WHERE ProductId IN (SELECT ProductId FROM [Order Details] WHERE OrderId = {0})", orderId));
        gvProducts.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        gvCustomers.DataSource = GetData("SELECT TOP 10 * FROM Customers")
        gvCustomers.DataBind()
    End If
End Sub

Private Shared Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

    Using con As SqlConnection = New SqlConnection(conString)

        Using sda As SqlDataAdapter = New SqlDataAdapter(query, con)

            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Protected Sub OnCustomerRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim customerId As String = gvCustomers.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim gvOrders As GridView = TryCast(e.Row.FindControl("gvOrders"), GridView)
        gvOrders.DataSource = GetData(String.Format("SELECT TOP 3 * FROM Orders WHERE CustomerId='{0}'", customerId))
        gvOrders.DataBind()
    End If
End Sub

Protected Sub OnOrderRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim orderId As String = (TryCast(sender, GridView)).DataKeys(e.Row.RowIndex).Value.ToString()
        Dim gvProducts As GridView = TryCast(e.Row.FindControl("gvProducts"), GridView)
        gvProducts.DataSource = GetData(String.Format("SELECT ProductId, ProductName FROM Products WHERE ProductId IN (SELECT ProductId FROM [Order Details] WHERE OrderId = {0})", orderId))
        gvProducts.DataBind()
    End If
End Sub