Nested GridView Example in ASP.Net

In ASP.NET, GridView is a powerful tool for displaying tabular data. Sometimes, you might need to display hierarchical data, where each parent row has associated child rows. In this tutorial, we'll learn how to create a nested GridView in ASP.NET.

What is a Nested GridView?

A nested GridView is a GridView control embedded within another GridView. It allows you to display parent-child relationships in a tabular format, making it ideal for scenarios where data has a hierarchical structure.

Step-by-Step Guide

Follow these steps to create a nested GridView in ASP.NET:

  1. Design the UI: In your ASP.NET web form, define two GridView controls—one for the parent data and another for the child data.

  2. Bind the Parent GridView: Populate the parent GridView with data. You can do this by retrieving data from a database or any other data source.

  3. Handle RowDataBound Event: Attach an event handler to the parent GridView's RowDataBound event. In this event handler, you'll bind the child GridView based on the parent row's data.

  4. Bind the Child GridView: Inside the RowDataBound event handler, find the child GridView control in the current row and populate it with data related to the parent row.

Example Code

Here's a sample code snippet demonstrating how to implement a nested GridView in ASP.NET:

Aspx Code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Nested GridView Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        .expandCollapse i { cursor: pointer; }
        .collapse { display: none; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.expandCollapse i').click(function () {
                var panel = $(this).closest('tr').find('[id*=pnlExams]');
                var expandIcon = $(this).closest('tr').find('.expand');
                var collapseIcon = $(this).closest('tr').find('.collapse');
                if (panel.is(':visible')) {
                    panel.hide();
                    expandIcon.show();
                    collapseIcon.hide();
                } else {
                    panel.show();
                    expandIcon.hide();
                    collapseIcon.show();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CssClass="Grid" DataKeyNames="StudentName" OnRowDataBound="OnRowDataBound">
                <Columns>
                    <asp:BoundField DataField="StudentName" HeaderText="Student Name" />
                    <asp:BoundField DataField="Class" HeaderText="Class" />
                    <asp:BoundField DataField="RollNo" HeaderText="Roll No" />
                    <asp:TemplateField>
                        <ItemTemplate>
                            <div class="expandCollapse">
                                <i class="expand fas fa-plus"></i>
                                <i class="collapse fas fa-minus" style="display:none"></i>
                            </div>
                            <asp:Panel ID="pnlExams" runat="server" Style="display: none">
                                <asp:GridView ID="gvExams" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">
                                    <Columns>
                                        <asp:BoundField DataField="ExamName" HeaderText="Exam Name" />
                                        <asp:BoundField DataField="MarksObtained" HeaderText="Marks Obtained" />
                                        <asp:BoundField DataField="MaximumMarks" HeaderText="Maximum Marks" />
                                    </Columns>
                                </asp:GridView>
                            </asp:Panel>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Code Behind:


using System;
using System.Data;
using System.Web.UI.WebControls;

public partial class NestedGridViewExample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindParentGrid();
        }
    }

    protected void BindParentGrid()
    {
        // Assume you have some data source for the parent GridView
        DataTable dtParent = new DataTable();
        dtParent.Columns.Add("StudentName", typeof(string));
        dtParent.Columns.Add("Class", typeof(string));
        dtParent.Columns.Add("RollNo", typeof(string));

        // Fill some sample data
        dtParent.Rows.Add("John Doe", "Class 10", "101");
        dtParent.Rows.Add("Jane Smith", "Class 9", "102");
        dtParent.Rows.Add("David Brown", "Class 11", "103");

        gvCustomers.DataSource = dtParent;
        gvCustomers.DataBind();
    }

    protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // Find the child GridView control in the current row
            GridView gvExams = (GridView)e.Row.FindControl("gvExams");

            // You would need to fill Child GridView based on the student, here I'm filling it with sample data
            DataTable dtExams = new DataTable();
            dtExams.Columns.Add("ExamName", typeof(string));
            dtExams.Columns.Add("MarksObtained", typeof(int));
            dtExams.Columns.Add("MaximumMarks", typeof(int));

            // Fill some sample exam data
            dtExams.Rows.Add("Midterm", 80, 100);
            dtExams.Rows.Add("Final", 90, 100);

            gvExams.DataSource = dtExams;
            gvExams.DataBind();
        }
    }
}


Conclusion

Nested GridViews in ASP.NET provide a convenient way to display hierarchical data in a tabular format. By following the steps outlined in this tutorial, you can easily create nested GridViews to enhance the presentation of your data.

 
Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
6 + 7 =
 

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice