Nested Grid view in asp.net ?

Hi Karthik K,

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>




    
    




    

    
        
            
                
                    
                    
                        
                            
                                
                                
                            
                        
                    
                
            
            
            
        
    
    

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class CS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvCustomers.DataSource = GetData("select top 10 * from Customers");
            gvCustomers.DataBind();
        }
    }

    private static DataTable GetData(string query)
    {
        string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(strConnString))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = query;
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        DataTable dt = new DataTable();
                        sda.Fill(dt);
                        return dt;
                    }
                }
            }
        }
    }

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

Output

Fore more details:

• A nested gridview example

Hope this will help you!

Steps:

1. Use a parent GridView (gvHeader) to display the header data.
2. Use a child GridView (gvDetails) inside a of the parent grid.
3. Bind both grids to their respective data sources.
4. Use RowDataBound to bind the detail grid based on the parent row's data.

Code Implementation

ASPX Page

Code-Behind (C#)

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindHeaderGrid();
    }
}

private void BindHeaderGrid()
{
    // Sample data for the Header Grid
    DataTable dtHeader = new DataTable();
    dtHeader.Columns.Add("Barcode");
    dtHeader.Columns.Add("Qty", typeof(int));
    dtHeader.Columns.Add("InventoryName");

    dtHeader.Rows.Add("A01", 4, "Abcd");

    gvHeader.DataSource = dtHeader;
    gvHeader.DataBind();
}

protected void gvHeader_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string barcode = DataBinder.Eval(e.Row.DataItem, "Barcode").ToString();
        GridView gvDetails = (GridView)e.Row.FindControl("gvDetails");

        if (gvDetails != null)
        {
            gvDetails.DataSource = GetDetailData(barcode);
            gvDetails.DataBind();
        }
    }
}

private DataTable GetDetailData(string barcode)
{
    // Sample data for Details Grid
    DataTable dtDetails = new DataTable();
    dtDetails.Columns.Add("BranchId");
    dtDetails.Columns.Add("Qty", typeof(int));

    if (barcode == "A01")
    {
        dtDetails.Rows.Add("B001", 2);
        dtDetails.Rows.Add("B002", 2);
    }

    return dtDetails;
}

Explanation

1. The gvHeader GridView displays the parent data (Barcode, Qty, InventoryName).
2. Inside gvHeader, there's a nested gvDetails GridView inside a TemplateField.
3. The gvHeader_RowDataBound event fetches the details data (GetDetailData) and binds it automatically for each row.
4. This ensures that the child grid is loaded without the need for an expand/collapse button.

This will result in a nested GridView that loads automatically with details displayed for each row.

Nested Grid view in ASP.NET refers to a scenario where one Grid view control is nested within another, allowing for a hierarchical representation of data. In your case, you are looking to implement a Nested Grid view without the traditional expand/collapse buttons, with data automatically loaded.

To achieve this in ASP.NET, you can use nested Grid views within a parent-child relationship. Here is a brief example to guide you:

1. Define your parent Grid view with the header details (Barcode, Qty, InventoryName):

2. Define your child Grid view for displaying details (Brachid, Qty):

3. In your code-behind (C#), you can populate these Grid views with data. Here is a simplified example:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Populate the parent Grid view with header details
        DataTable dtParent = GetParentData();
        gvParent.DataSource = dtParent;
        gvParent.DataBind();
    }
}

// Method to get parent data
private DataTable GetParentData()
{
    // Dummy data for illustration
    DataTable dtParent = new DataTable();
    dtParent.Columns.Add("Barcode");
    dtParent.Columns.Add("Qty");
    dtParent.Columns.Add("InventoryName");
    
    // Add rows to the DataTable
    // DataRow row = dtParent.NewRow();
    // row["Barcode"] = "A01";
    // row["Qty"] = 4;
    // row["InventoryName"] = "Abcd";
    // dtParent.Rows.Add(row);

    // Add more rows as needed

    return dtParent;
}

4. You can similarly populate the child Grid view (`gvChild`) with relevant details when a row in the parent Grid view is selected by handling events like `SelectedIndexChanged`.

This is a basic outline to get you started on implementing a nested Grid view in ASP.NET without expand/collapse buttons. You can further enhance this with styling, data binding, and additional functionalities based on your requirements.

Let me know if you need further assistance or details on a specific aspect!