Pages

Monday 17 June 2013

Nested gridview example in asp.net

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.

Description
Now I will explain how to implement gridview within gridview or nested gridview example in asp.net.After completion of table design write following code in your aspx page like
 
 
<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

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=.;Integrated Security=true;Initial Catalog=Test");

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();
}
}
 
 

No comments:

Post a Comment