Introduction:
In this article I will explain how to implement gridview with in a gridview example or nested gridview with expand/collapse options in asp.net.
In this article I will explain how to implement gridview with in a gridview example or nested gridview with expand/collapse options in asp.net.
Description:
In previous posts I explained asp.net gridview examples and bind data to textbox control in gridview ,Bind data to dropdownlist in gridview in asp.net. Now I will explain how to implement gridview within gridview or nested gridview example in asp.net.
In previous posts I explained asp.net gridview examples and bind data to textbox control in gridview ,Bind data to dropdownlist in gridview in asp.net. Now I will explain how to implement gridview within gridview or nested gridview example in asp.net.
To implement this concept first design tables (Country and State)
in your database as explained in this post populate dropdown based on another
dropdown in asp.net. After completion of table design write
following code in your aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Gridview within Gridivew - Nested gridview example in
asp.net </title>
<script language="javascript" type="text/javascript">
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img'
+ divname);
if (div.style.display == "none")
{
div.style.display = "inline";
img.src = "minus.gif";
} else {
div.style.display = "none";
img.src = "plus.gif";
}
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:GridView ID="gvParentGrid"
runat="server"
DataKeyNames="CountryId"
Width="300"
AutoGenerateColumns="false" OnRowDataBound="gvUserInfo_RowDataBound" GridLines="None"
BorderStyle="Solid"
BorderWidth="1px" BorderColor="#df5015">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="#E1E1E1" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("CountryID") %>');">
<img id="imgdiv<%#
Eval("CountryID") %>" width="9px"
border="0"
src="plus.gif"
/>
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CountryId" HeaderText="CountryId" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="CountryName" HeaderText="CountryName" HeaderStyle-HorizontalAlign="Left" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="div<%#
Eval("CountryID") %>" style="display: none; position: relative; left: 15px; overflow: auto">
<asp:GridView ID="gvChildGrid"
runat="server"
AutoGenerateColumns="false"
BorderStyle="Double" BorderColor="#df5015" GridLines="None" Width="250px">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="#E1E1E1" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:BoundField DataField="StateID"
HeaderText="StateID"
HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="StateName"
HeaderText="StateName"
HeaderStyle-HorizontalAlign="Left" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
|
Now
add following namespaces in codebehind
C# Code
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
|
After
that add following code in code behind
SqlConnection con = new SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
// This method is used to bind
gridview from database
protected void
BindGridview()
{
con.Open();
SqlCommand cmd = new SqlCommand("select
TOP 4 CountryId,CountryName from Country", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
gvParentGrid.DataSource = ds;
gvParentGrid.DataBind();
}
protected void
gvUserInfo_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
con.Open();
GridView gv = (GridView)e.Row.FindControl("gvChildGrid");
int CountryId = Convert.ToInt32(e.Row.Cells[1].Text);
SqlCommand cmd = new SqlCommand("select
* from State where CountryID=" + CountryId, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
gv.DataSource = ds;
gv.DataBind();
}
}
|
VB.NET Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI.WebControls
Partial Class
VBSample
Inherits System.Web.UI.Page
Private con As New SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As
EventArgs) Handles Me.Load
If Not IsPostBack Then
BindGridview()
End If
End Sub
' This method is used to bind
gridview from database
Protected Sub
BindGridview()
con.Open()
Dim cmd As New SqlCommand("select
TOP 4 CountryId,CountryName from Country", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
con.Close()
gvParentGrid.DataSource = ds
gvParentGrid.DataBind()
End Sub
Protected Sub
gvUserInfo_RowDataBound(ByVal sender As Object, ByVal e As
GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
con.Open()
Dim gv As GridView = DirectCast(e.Row.FindControl("gvChildGrid"), GridView)
Dim CountryId As Integer = Convert.ToInt32(e.Row.Cells(1).Text)
Dim cmd As New SqlCommand("select
* from State where CountryID=" & CountryId, con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
con.Close()
gv.DataSource = ds
gv.DataBind()
End If
End Sub
End Class
|
|
Demo
 |
Download sample code attached
Comments
Post a Comment