Nested GridViews
In this example we are going to display the orders and its details from the Northwind database in one GridView. In an TemplateField place a GridView which calls a function to get the child records.
The Web Page
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" GridLines="None"
AutoGenerateColumns="False" ForeColor="#333333">
<FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="OrderId" HeaderText="Order ID" />
<asp:TemplateField HeaderText="Order Info">
<ItemTemplate>
<span>Customer </span>
<asp:Label ID="lblCust" Text='<%# Eval("CustomerID") %>' runat="server" /><br />
<span>Order Date </span>
<asp:Label ID="lblOrdDate" Text='<%# Convert.ToDateTime(Eval("OrderDate")).ToShortDateString %>'
runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ordered Items">
<ItemTemplate>
<asp:GridView runat="server" ID="Details" DataSource='<%# GetDetails(Eval("OrderID")) %>'>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
</asp:GridView>
</div>
</form>
</body>
</html>
The Code Behind File
Imports System.Data.SqlClient
Imports System.Data
Partial Class _Default
Inherits System.Web.UI.Page
Dim dtDetails As New DataTable
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dt As New DataTable
Dim strConn As String
Dim da As SqlDataAdapter
Dim conn As SqlConnection
strConn = "Server = .\sqlexpress;Database = NorthWind; Integrated Security = SSPI;"
conn = New SqlConnection(strConn)
da = New SqlDataAdapter("Select * from Orders", conn)
da.Fill(dt)
da = New SqlDataAdapter("Select * from [Order Details]", conn)
da.Fill(dtDetails)
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Public Function GetDetails(ByVal strID As String) As DataTable
Dim dt As DataTable = dtDetails.Clone
For Each dr As DataRow In dtDetails.Select("OrderID = " & strID)
dt.ImportRow(dr)
Next
Return dt
End Function
End Class