ASP.Net Nested Repeater Tutorial

Displaying collections of data from data sources is a necessity for web applications. There may come a time when you will want to assemble a DataTable object and bind to a repeater which will also contain an inside repeater. The nested relationship would logically be represented in T-SQL by a foreign key relationship on the referenced tables. The syntax in ASP.Net can sometimes get a little hairy when attempting this for the first time. I’m going to walk you through the process and show you how to get this working on your web application.

Step one is simple, you’re going to lay out your templates where your repeaters are going to go. My normal way of doing this is to layout one single instance of the contents of and then surround that with the necessary

Now that you have an idea of how you want things to look, lets build a little code to create the nested data set for the repeater groups. From the code behind file, we need a new method which will occur on Page_Load to bind the required data to the outer repeater.

protected void Page_Load(object sender, EventArgs e)

{

// Bind the data to repeater only on page load

if (!Page.IsPostBack)

{

BindRepeaters();

}

}

private void BindRepeaters()

{

// Create a new data set

DataSet dataSet = new DataSet();

// Outter repeater data source returns a DataTable

dataSet.Tables.Add(ProductGroupFunctions.GetProductGroups());

// Inner repeater data source also returns a DataTable

dataSet.Tables.Add(ProductFunctions.GetProducts());

// Create foreign key relationship on tables using ProductGroupID

DataColumn colGroups = dataSet.Tables[0].Columns["ProductGroupID"];

DataColumn colProducts = dataSet.Tables[1].Columns["ProductGroupID"];

// Group the tables using the relationship

dataSet.Relations.Add(new DataRelation("products", colGroups, colProducts));

// Bind the outer repeater to our created DataSet object

rptProductGroup.DataSource = dataSet;

// Allow the Page to handle DataBind event

Page.DataBind();

}

So what we’ve done there is take two DataTables and combined them into logical groups. The example I’ve shown here assumes that Products belong to ProductGroups inside your database, which is process of database normalization. Then given these two sources we’re going to allow the outer repeater to show only the products which belong to its current repeated group. This looks something like the following:

ProductGroup A
Product A1
Product A2

ProductGroup B
Product B1
Product B2
Product B3

Now the final step is to fill in the labels, hyperlinks, images etc inside your repeaters. The practice is a little bit more syntactically obscure and I’m sure this is where a lot of headaches are caused.

The outer repeater is the basic one and is not handled any differently than normal repeaters. Here is the complete example from the grouped products example above in HTML code.

">

DataItem).Row.GetChildRows("products") %>">

DataItem, "[\"Picture\"]").ToString() %>">

DataItem, "[\"Name\"]").ToString() %>">

Container.DataItem, "[\"Price\"]").ToString())) %>">

ProductID=" + DataBinder.Eval(Container.DataItem, "[\"ProductID\"]").ToString() %>">

Finally to wrap up, you’ll notice in the outer repeater to fill a Label to show the group we have:

">

In the DataTable we built there was a corresponding column called “Name” and it’s simple as ever before to use that column.

On the inside repeater we need to perform things differently. First we need to provide the repeater with a DataSource as always. This going to be changing depending on which row of the outer repeater is being processed. This is accomplished inside the

DataSource='' >

Where “products” is in the name of the DataRelation object we inserted in our custom DataSet. Finally on inside repeater we need to specify the column names differently. There could be another column which again titled “Name” which is union joined by the relationship. As an example of an inner control we are going to fill a label control’s text value as follows:

DataItem, "[\"Name\"]").ToString() %>">

Hopefully this gives you a starting block to jump from and attempt this yourself. This can be useful in examples like I’ve demonstrated above, site maps, or any other collection of collections you may have to represent in ASP.Net.