Nested GridView with JS
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Nested GridView</title>
<script type=”text/C#” runat=”server”>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
GridView gv = (GridView)e.Row.FindControl(“GridView2″);
SqlDataSource dbSrc = new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings["LoginCon"].ConnectionString;
dbSrc.SelectCommand = “SELECT * FROM Orders WHERE CustomerID = ‘” + GridView1.DataKeys[e.Row.RowIndex].Value + “‘ ORDER BY OrderDate”;
gv.DataSource = dbSrc;
gv.DataBind();
}
}
</script>
<script type=”text/javascript”>
function ShowChildGrid(obj)
{
var div = document.getElementById(obj);
var img = document.getElementById(‘img’ + obj);
var theFlag = div.style.display == “none”;
div.style.display = (theFlag) ? “inline” : “none”;
img.src = (theFlag) ? “Images/arrowdown.jpg” : “Images/arrowright.jpg”;
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”GridView1″ runat=”server”
AllowPaging=”True”
AutoGenerateColumns=”False”
DataKeyNames=”CustomerID”
DataSourceID=”SqlDataSource1″
PageSize=”20″
OnRowDataBound=”GridView1_RowDataBound”>
<HeaderStyle CssClass=”dataTable” />
<RowStyle CssClass=”dataTable” />
<AlternatingRowStyle CssClass=”dataTableAlt” />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href=”javascript:ShowChildGrid(‘div<%# Eval(“CustomerID”) %>’);”>
<img id=”imgdiv<%# Eval(“CustomerID”) %>” alt=”Click to show/hide orders” border=”0″ src=”Images/arrowright.jpg” />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField=”CompanyName” HeaderText=”CompanyName” SortExpression=”CompanyName” />
<asp:BoundField DataField=”ContactName” HeaderText=”ContactName” SortExpression=”ContactName” />
<asp:BoundField DataField=”Address” HeaderText=”Address” SortExpression=”Address” />
<asp:BoundField DataField=”City” HeaderText=”City” SortExpression=”City” />
<asp:BoundField DataField=”PostalCode” HeaderText=”PostalCode” SortExpression=”PostalCode” />
<asp:BoundField DataField=”Phone” HeaderText=”Phone” SortExpression=”Phone” />
<asp:TemplateField>
<ItemTemplate>
</td></tr>
<tr>
<td colspan=”100%”>
<div id=”div<%# Eval(“CustomerID”) %>” style=”display:none;position:relative;left:25px;” >
<asp:GridView ID=”GridView2″ runat=”server”
AutoGenerateColumns=”false”
DataKeyNames=”OrderID”
EmptyDataText=”No orders for this customer.”
Width=”80%”>
<HeaderStyle CssClass=”dataTable” />
<AlternatingRowStyle CssClass=”dataTableAlt” />
<RowStyle CssClass=”dataTable” />
<Columns>
<asp:BoundField DataField=”OrderDate” HeaderText=”Order Date” DataFormatString=”{0:MMM-dd-yyyy}” HtmlEncode=”False” />
<asp:BoundField DataField=”ShippedDate” HeaderText=”Shipped Date” DataFormatString=”{0:MMM-dd-yyyy}” HtmlEncode=”False” />
<asp:BoundField DataField=”ShipCity” HeaderText=”Shipped To” />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:LoginCon %>”
SelectCommand=”SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [PostalCode], [Phone] FROM [Customers]“>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Create two tables Customers and Orders with the relationship field (Foreign Key) “CustomerID”.
P.S Dont forget to find two images appropriate images
Images arrowright arrowdown
