Nested Grid using asp.net
Nested Grid using asp.net
Write
the design code in aspx page
Grid.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Nested_Grid.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body {
font-family: Times New Roman;
font-size: 10pt;
}
.Grid th {
background-color: #DF7401;
color: White;
font-size: 10pt;
line-height: 100%;
}
.Grid td {
background-color: #F3E2A9;
color: black;
font-size: 10pt;
line-height: 100%;
text-align: center;
}
.ChildGrid th {
background-color: Maroon;
color: White;
font-size: 10pt;
}
.ChildGrid td {
background-color: Orange;
color: black;
font-size: 10pt;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="Grid1" AutoGenerateColumns="false" runat="server" DataKeyNames="Id" CssClass="Grid" ShowFooter="true" OnRowDataBound="GridState_RowDataBound">
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("Id")%>');">
<img alt="City" id="imgdiv<%# Eval("Id")%>" width="9px" border="0" src="../images/plus1.jpg" /></a>
</ItemTemplate>
<ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
</asp:TemplateField>
<%-- <div
id="div<%# Eval("Id") %>" style="display:
none;">--%>
<asp:TemplateField HeaderText="Employee
Id" Visible="false">
<ItemTemplate>
<asp:Label ID="lblEmpId" Text='<%# DataBinder.Eval(Container.DataItem,"Id") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="50px" DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField ItemStyle-Width="50px" DataField="LastName" HeaderText="LastName" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="6">
<div id="div<%# Eval("Id") %>" style="overflow: auto; display: none;">
<asp:GridView ID="Grid2" DataKeyNames="Id" AutoGenerateColumns="false" runat="server" CssClass="ChildGrid" >
<Columns>
<asp:TemplateField ItemStyle-Width="20px" >
<ItemTemplate>
<a href="javaScript:divexpandcollapse('div1<%# Eval("Id")%>');">
<%-- <img
id="imgdiv<%# Eval("Id") %>" width="9px"
border="0" src="../images/plus1.jpg"
alt=""></a>--%>
</ItemTemplate>
<ItemStyle Width="20px" VerticalAlign="Bottom"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Employee
ID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblEmp1ID" runat="server" Text='<%#DataBinder.Eval
(Container.DataItem, "Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />
<asp:BoundField ItemStyle-Width="50px" DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script 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
= "images/minus.jpg";
} else {
div.style.display
= "none";
img.src
= "images/plus1.jpg";
}
}
</script>
</body>
</html>
Grid.aspx.cs
SqlConnection con = new SqlConnection();
SqlCommand cmd = new SqlCommand();
SqlDataAdapter sda = new SqlDataAdapter();
DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
con.ConnectionString = "Data Source=SWASHDBS\\SWASHSQLINT;Initial Catalog=induction;Persist
Security Info=True;User ID=induction;Password=swash@2015";
con.Open();
if (!IsPostBack)
{
string sQuery = "Select
Firstname,LastName,Id from Employee";
Grid1.DataSource =
getData(sQuery);
Grid1.DataBind();
//bind();
}
}
protected void GridState_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataTable dt = new DataTable();
Label lblEmpId = (Label)e.Row.FindControl("lblEmpId");
GridView gv = (GridView)e.Row.FindControl("Grid2");
int id = Convert.ToInt32(lblEmpId.Text);
cmd.CommandText = "select * from Employee where Id=" + id + "";
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
gv.DataSource = dt;
gv.DataBind();
}
}
private DataTable getData(string sQuery)
{
DataTable dt2 = new DataTable();
cmd.CommandText = sQuery;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt2);
con.Close();
return dt2;
}
Comments
Post a Comment