Implemented using Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.Grid td
{
background-color: #A1DCF2;
}
.Grid span
{
color: black;
font-size: 10pt;
line-height: 200%;
}
.Grid th
{
background-color: #3AC0F2;
color: White;
font-size: 10pt;
line-height: 200%;
}
.ChildGrid td
{
background-color: #eee !important;
}
.ChildGrid span
{
color: black;
font-size: 10pt;
line-height: 200%;
}
.ChildGrid th
{
background-color: #6C6C6C !important;
color: White;
font-size: 10pt;
line-height: 200%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table class="Grid" cellspacing="0" rules="all" border="1">
<tr>
<th scope="col">
</th>
<th scope="col" style="width: 150px">
Contact Name
</th>
<th scope="col" style="width: 150px">
City
</th>
</tr>
<asp:Repeater ID="rptCustomers" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<tr>
<td>
<img alt="" style="cursor: pointer" src="images/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<table class="ChildGrid" cellspacing="0" rules="all" border="1">
<tr>
<th scope="col" style="width: 150px">
Order Id
</th>
<th scope="col" style="width: 150px">
Date
</th>
</tr>
<asp:Repeater ID="rptOrders" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblOrderId" runat="server" Text='<%# Eval("OrderId") %>' />
</td>
<td>
<asp:Label ID="lblOrderDate" runat="server" Text='<%# Eval("OrderDate") %>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</asp:Panel>
<asp:HiddenField ID="hfCustomerId" runat="server" Value='<%# Eval("CustomerId") %>' />
</td>
<td>
<asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' />
</td>
<td>
<asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</form>
</body>
</html>
Namespace
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptCustomers.DataSource = GetData("select top 10 * from Customers");
rptCustomers.DataBind();
}
}
private static DataTable GetData(string query)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = query;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
}
protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string customerId = (e.Item.FindControl("hfCustomerId") as HiddenField).Value;
Repeater rptOrders = e.Item.FindControl("rptOrders") as Repeater;
rptOrders.DataSource = GetData(string.Format("select top 3 * from Orders where CustomerId='{0}'", customerId));
rptOrders.DataBind();
}
}
Screenshots
