Using Nested Repeaters in ASP.NET and VB

This tutorial shows how to use nested repeaters to display hierarchical data from a database. VB version.

Repeaters are very powerful tools for displaying data, and while they are not the most feature-packed tool in the ASP.NET toolbox, they are arguably the most versatile.
One of the things we can do with Repeaters is nest them to show hierarchical data. In this example, we will display a menu system with sub-menu items, using two Repeaters. These menu items will be pulled from a Sample database.

First, we add the Connection String in Web.config:

<appSettings> <add key="ConnectionString" value="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" /> </appSettings> <connectionStrings/>

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

We also need the following assembly references:

Imports System.Data Imports System.Data.SqlClient

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

We add the code for the two nested Repeater Controls:

<form id="form1" runat="server"> <asp:Repeater ID="repMenu1" runat="server"> <ItemTemplate> <a href="#"><%#DataBinder.Eval(Container.DataItem, "menuItem")%></a> <asp:Repeater ID="repMenu2" runat="server"> <HeaderTemplate><br /></HeaderTemplate> <ItemTemplate><div style="margin-left:15px;"><a href="#"><%#DataBinder.Eval(Container.DataItem, "subMenuItem")%></a><br /></div></ItemTemplate> </asp:Repeater> </ItemTemplate> </asp:Repeater> </form>

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Notice the nested Repeater is in the <ItemTemplate> tags of the first.
Next, we add the following to the code-behind.

Protected Sub ShowMenu() Dim cmd As New SqlDataAdapter("SELECT * FROM [Table1];SELECT * FROM [Table2]", New SqlConnection(ConfigurationManager.AppSettings("ConnectionString"))) Dim ds As New DataSet() cmd.Fill(ds) ds.Relations.Add(New DataRelation("nestThem", ds.Tables(0).Columns("ID"), ds.Tables(1).Columns("parentMenuID"))) repMenu1.DataSource = ds repMenu1.DataBind() End Sub Protected Sub repMenu1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles repMenu1.ItemDataBound Dim dv As DataRowView = TryCast(e.Item.DataItem, DataRowView) If dv IsNot Nothing Then Dim repSubMenu As Repeater = TryCast(e.Item.FindControl("repMenu2"), Repeater) If repSubMenu IsNot Nothing Then repSubMenu.DataSource = dv.CreateChildView("nestThem") repSubMenu.DataBind() End If End If End Sub

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

The above method should be called on Page_Load so that it can bind the data to the first repeater, which will retrieve the top-menu items from the database and populate the repeater. When menu1 is databound, it will find the matching submenu items in the database and bind them to the second (nested) repeater, displaying the sub-menu items below the parent.

The entire code-behind should look something like this:

Imports System.Data Imports System.Data.SqlClient Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ShowMenu() End Sub Protected Sub ShowMenu() Dim cmd As New SqlDataAdapter("SELECT * FROM [Table1];SELECT * FROM [Table2]", New SqlConnection(ConfigurationManager.AppSettings("ConnectionString"))) Dim ds As New DataSet() cmd.Fill(ds) ds.Relations.Add(New DataRelation("nestThem", ds.Tables(0).Columns("ID"), ds.Tables(1).Columns("parentMenuID"))) repMenu1.DataSource = ds repMenu1.DataBind() End Sub Protected Sub repMenu1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles repMenu1.ItemDataBound Dim dv As DataRowView = TryCast(e.Item.DataItem, DataRowView) If dv IsNot Nothing Then Dim repSubMenu As Repeater = TryCast(e.Item.FindControl("repMenu2"), Repeater) If repSubMenu IsNot Nothing Then repSubMenu.DataSource = dv.CreateChildView("nestThem") repSubMenu.DataBind() End If End If End Sub End Class

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!