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:
-
Design the UI: In your ASP.NET web form, define two GridView controls—one for the parent data and another for the child data.
-
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.
-
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.
-
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.