Using Nested Repeaters to Display Hierarchical Data

Quick Search

Navigator: Home - Advanced - Using Nested Repeaters to Display Hierarchical Data VB

Using Nested Repeaters to Display Hierarchical Data VB

This tutorial will show how we can create a relational hierarchical structure using nested repeaters. This is useful for such an implementation as a structured menu system with different levels (categories and sub-categories). VB version.

Download the Full Working Version of this Project written with Visual Studio.NET VB 2005 Here!

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

Looking for more ASP.NET Tutorials? Click Here!

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:

We also need the following assembly references:

Imports System.Data
Imports System.Data.SqlClient

We add the code for the two nested Repeater Controls:

</asp:Repeater>

</ItemTemplate>

</asp:Repeater>

</form>

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 Sub

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()