Nested repeater or repeater within a repeater can be used to display master detail data or one-to-many relationship between two tables. Repeater control can be added to ItemTemplate of another repeater control. The nested repeater control can be bound to data in ItemDataBound event of the repeater control which is containing nested repeater control. We can find nested repeater control just like any other control in ItemTemplate and can bind data to it. ItemTemplate of nested repeater control is used to have data bound items in the same way as for parent repeater and, of course, you can use another nested repeater in ItemTemplate of nested repeater control.
I will show you the famous Category-Product relationship in NORTHWIND sample database in parent child repeater controls. Parent repeater will show the categories and their names and nested repeater will show product name for each category.
1.Create a new Web Site in Visual Studio 2010 either in C# or VB.NET
2.Add a Web Form to Web Site
3.Write code below in your aspx page.
<table>
<asp:Repeater ID="Repeater1" runat="server"
onitemdatabound="Repeater1_ItemDataBound">
<HeaderTemplate>
<tr>
<th>CategoryID</th>
<th>CategoryName</th>
<th>Products</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="background-color:Lime">
<%#DataBinder.Eval(Container.DataItem,"CategoryID")%>
</td>
<td style="background-color:Lime">
<%#DataBinder.Eval(Container.DataItem,"CategoryName")%>
</td>
<td style="background-color:Lime">
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"ProductName")%><br />
</ItemTemplate>
</asp:Repeater>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<tr>
<td style="background-color:Orange">
<%#DataBinder.Eval(Container.DataItem,"CategoryID")%>
</td>
<td style="background-color:Orange">
<%#DataBinder.Eval(Container.DataItem,"CategoryName")%>
</td>
<td style="background-color:Orange">
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"ProductName")%><br />
</ItemTemplate>
</asp:Repeater>
</td>
</AlternatingItemTemplate>
<FooterTemplate>
<tr>
<td colspan="3"> Nested Repeater </td>
</tr>
</FooterTemplate>
</asp:Repeater>
</table>
You can see in the code, I have added a Repeater control in ItemTemplate of another Repeater control. I have also bound CategoryID and CategoryName in parent repeater and ProductName in nested repeater ItemTemplate. I will show you the code in next steps to get data from both Categories and Products tables.
4.Write code below in code behind file to get data from Categories table and bind it to parent Repeater in Page Load. Include “System.Data” and “System.Data.SqlClient” namespaces in code file.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = CategoryData();
Repeater1.DataBind();
}
}
private DataTable CategoryData()
{
SqlConnection con = new SqlConnection("Data Source=MyPC;Initial Catalog=C:\\SQL SERVER 2000 SAMPLE DATABASES\\NORTHWND.MDF;Integrated Security=True");
con.Open();
string sql = "SELECT CategoryID, CategoryName FROM Categories";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
con.Close();
return dt;
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Repeater1.DataSource = CategoryData()
Repeater1.DataBind()
End If
End Sub
Private Function CategoryData() As DataTable
Dim con As New SqlConnection("Data Source=MyPC;Initial Catalog=C:\SQL SERVER 2000 SAMPLE DATABASES\NORTHWND.MDF;Integrated Security=True")
con.Open()
Dim sql As String = "SELECT CategoryID, CategoryName FROM Categories"
Dim cmd As New SqlCommand(sql, con)
Dim da As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
da.Fill(dt)
con.Close()
Return dt
End Function
I have set my connection to SQL server database, written a query to get data and fill DataTable object. In Page_Load event, I have bound this data to parent or first repeater control.
5.Write code below to get data from Products table and to bind this data to nested Repeater, write a ItemDataBound Event of parent Repeater.
C#
private DataTable ProductData(int categoryID)
{
SqlConnection con = new SqlConnection("Data Source=MyPC;Initial Catalog=C:\\SQL SERVER 2000 SAMPLE DATABASES\\NORTHWND.MDF;Integrated Security=True");
con.Open();
string sql = "SELECT ProductName FROM Products WHERE CategoryID=" + categoryID;
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
con.Close();
return dt;
}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DataRowView drv = (DataRowView)e.Item.DataItem;
int categoryID = Convert.ToInt32(drv["CategoryID"]);
Repeater Repeater2 = (Repeater)e.Item.FindControl("Repeater2");
Repeater2.DataSource = ProductData(categoryID);
Repeater2.DataBind();
}
}
VB.NET
Private Function ProductData(ByVal categoryID As Integer) As DataTable
Dim con As New SqlConnection("Data Source=MyPC;Initial Catalog=C:\SQL SERVER 2000 SAMPLE DATABASES\NORTHWND.MDF;Integrated Security=True")
con.Open()
Dim sql As String = "SELECT ProductName FROM Products WHERE CategoryID=" & categoryID
Dim cmd As New SqlCommand(sql, con)
Dim da As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
da.Fill(dt)
con.Close()
Return dt
End Function
Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
Dim drv As DataRowView = DirectCast(e.Item.DataItem, DataRowView)
Dim categoryID As Integer = Convert.ToInt32(drv("CategoryID"))
Dim Repeater2 As Repeater = DirectCast(e.Item.FindControl("Repeater2"), Repeater)
Repeater2.DataSource = ProductData(categoryID)
Repeater2.DataBind()
End If
End Sub
In ProductData() function, I am getting data from Products table with a specific CategoryID. In ItemDataBound event of parent Repeater, I am getting CategoryID by using RepeaterItemEventArgs parameter and DataRowView class object. I have used RepeaterItemEventArgs parameteragain to find nested Repeater control. Product Data is bound to nested Repeater.
6.View Web Site in browser.
