Display a Nested List Inside Another Repeater

by Kevin Couch

Share This Article


A simple way to display a list of data is to use an asp:Repeater. If the data also needs to show a nested list of related data for each main item, one can place another Repeater inside the first. In the code behind, the queries used for each Repeater can be linked in a dataset as a parent-child relationship via a Data Relation.

In the example below we make the multiple queries in only one SQL command statement, then link the result tables together by making a newDataRelation. The link uses key and foreign key ID columns from each result set.

This C# example shows how you can have a list of phone numbers as an area inside a larger list of contacts.

In the Page_Load function…

         // Create and fill a DataSet
SqlDataAdapter myCommand = newSqlDataAdapter(

                          "SELECT DISTINCT MemberID, Address, FirstName, LastName " +
                           " FROM MemberNames M; " +

                           "SELECT MemID, phonetype, Number " +
                           " FROM MemberNames M " +
                           " INNER JOIN Phone P ON M.MemberID = P.MemID;" +
                            , myConnection);

                     DataSet ds = newDataSet();
                    myCommand.Fill(ds);

                     // Relate the two tables from the query together
                     ds.Relations.Add(newDataRelation("MemberID_Phone",         ds.Tables[0].Columns["MemberID"], ds.Tables[1].Columns["MemID"]));

                     // Bind the outer Repeater to the DataSet.
                     rptMember.DataSource = ds.Tables[0];
                     rptMember.DataBind();

When we bind the data for each item in the outer Repeater, we will create a child view using the relation we linked previously.

         protectedvoid rptMember_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
                  DataRowView drv = e.Item.DataItem asDataRowView;
                  Repeater rptPhone = e.Item.FindControl("rptPhone") asRepeater;

                  rptPhone.DataSource = drv.CreateChildView("MemberID_Phone");
                  rptPhone.DataBind();
}

This snippet from the .aspx files shows the nested repeaters.

<asp:Repeaterid="rptMember"OnItemDataBound="rptMember_ItemDataBound"runat="server">

            <ItemTemplate>

               <!– Tags to display the bound data (name, address, etc.) –>

               <!– Make a repeater for all phone numbers for each person –>

                  <asp:Repeaterid="rptPhone"runat="server">
                     <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "PhoneType")%>:
                        <%#DataBinder.Eval(Container.DataItem, "Number")%>

                     </ItemTemplate>
                  </asp:Repeater>

To sum it all up, we implemented several technical elements here.

  • Nested Repeaters
  • Using a multi-result query
  • Using DataSet Relations

Our example displays a list of Contacts with a sub-list for multiple phone numbers.