Default.aspx
<!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>Gridview inside another Gridview</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function shrinkandgrow(input) {
var displayIcon = "img" + input;
if ($("#" + displayIcon).attr("src") == "grow.png")
{
$("#" + displayIcon).closest("tr")
.after("<tr><td></td><td colspan = '100%'>" + $("#" + input)
.html() + "</td></tr>");
$("#" + displayIcon).attr("src", "shrink.png");
} else
{
$("#" + displayIcon).closest("tr").next().remove();
$("#" + displayIcon).attr("src", "grow.png");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="pub_id"
OnRowDataBound="GridView1_OnRowDataBound" HeaderStyle-BackColor="#A52A2A" HeaderStyle-ForeColor="White" >
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:shrinkandgrow('div<%# Eval("pub_id") %>');">
<img alt="Details" id="imgdiv<%# Eval("pub_id") %>" src="grow.png" />
</a>
<div id="div<%# Eval("pub_id") %>" style="display: none;">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="pub_id"
HeaderStyle-BackColor="#FFA500" HeaderStyle-ForeColor="White">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="title" HeaderText="Title" />
<asp:BoundField ItemStyle-Width="100px" DataField="type" HeaderText="Category" />
<asp:BoundField ItemStyle-Width="100px" DataField="price" HeaderText="Price" />
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="pub_name" HeaderText="Publisher" />
<asp:BoundField ItemStyle-Width="100px" DataField="state" HeaderText="State" />
<asp:BoundField ItemStyle-Width="100px" DataField="country" HeaderText="Country" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# Source Code
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;
public partial class NestedGridView : System.Web.UI.Page
{
string connetionString = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=*****";
protected void Page_Load(object sender, EventArgs e)
{
string sql = "SELECT pub_id, pub_name,state,country FROM publishers";
GridView1.DataSource = getData(sql);
GridView1.DataBind();
}
protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string pub_id = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
string sql = "SELECT pub_id, title, type,price FROM titles WHERE pub_id='" + pub_id + "'";
GridView pubTitle = (GridView)e.Row.FindControl("GridView2");
pubTitle.DataSource = getData(sql);
pubTitle.DataBind();
}
}
private DataTable getData(string sql)
{
SqlDataAdapter adapter = new SqlDataAdapter();
DataTable dTable = new DataTable();
SqlConnection connection = new SqlConnection(connetionString);
connection.Open();
SqlCommand command = new SqlCommand(sql, connection);
adapter.SelectCommand = command;
adapter.Fill(dTable);
adapter.Dispose();
command.Dispose();
connection.Close();
return dTable;
}
}
VB.Net Source Code
Imports System.Drawing
Imports System.Data.SqlClient
Imports System.Data
Partial Class _Default
Inherits System.Web.UI.Page
Dim connetionString As String = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim sql As String = "SELECT pub_id, pub_name,state,country FROM publishers"
GridView1.DataSource = getData(sql)
GridView1.DataBind()
End Sub
Protected Sub GridView1_OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim pub_id As String = GridView1.DataKeys(e.Row.RowIndex).Value.ToString()
Dim sql As String = (Convert.ToString("SELECT pub_id, title, type,price FROM titles WHERE pub_id='") & pub_id) + "'"
Dim pubTitle As GridView = DirectCast(e.Row.FindControl("GridView2"), GridView)
pubTitle.DataSource = getData(sql)
pubTitle.DataBind()
End If
End Sub
Private Function getData(ByVal sql As String) As DataTable
Dim adapter As New SqlDataAdapter()
Dim dTable As New DataTable()
Dim connection As New SqlConnection(connetionString)
connection.Open()
Dim command As New SqlCommand(sql, connection)
adapter.SelectCommand = command
adapter.Fill(dTable)
adapter.Dispose()
command.Dispose()
connection.Close()
Return dTable
End Function
End Class
