Nested Repeater Control: Display hierarchical data [MS sql server, C#]


 Nested Repeater Control: This article explains how to use nested repeater controls in C# to display hierarchical data from MS SQL Server database. You can also check some of my previous, C# related articles.

At the end of this tutorial, I also provide sample example code i.e., How to show/display hierarchical data in c# using nested repeater control.

What is Repeater Control?

The Repeater control is a container control that allows you to create custom lists out of any data that is available to the page. The Repeater control may be bound to a database table, an XML file, or another list of items.

One good feature about Repeater Control is, we nest them to show hierarchical data.

So here we are going to demonstrate a simple Web Application to display hierarchical data using nested Repeater Control C#Display hierarchical data using nested repeater control in C#

Steps to use nested repeater control & display hierarchical data

  1. Create tables ( having primary, foreign key relation).
  2. Bind Parent Repeater Control.
  3. Bind Child Repeater Control.

Let’s head up to each step:

# Create tables with the relationship:

Here we created two tables, named as team_info, player_info. We are going to display the list of IPL team (data as teamName, logo, ownerName) and players (data as playerName, role).

So we have a parent-child relationship between these two tables, i.e., (team_info,player_info) as shown in Fig 1.

Fig 1.
Table relationship parent child

Now we added some data as shown in Fig 2.

Fig 2.database table

We are done with our database part now move on coding part (c#) 🙂

# Bind parent-Repeater with Parent Table:

First, open your Visual Studio add a new project, then add default Web Form ( .aspx page).

Now we added an repeater control in our web form ( .aspx page) and changed its id as rptParent.

As we want to display team information i.e., team name, team logo and team owner name for that we will add some HTML tag under <itemtemplate>. Html markup of repeater control looks like as written bellow.

We are done with markup now let’s head at the code behind.

# Code behind:

On button_click, we call a method which pulls data from MS SQL Server database and stored it in Dataset alias table name as teamInfo.

Now this teamInfo table contains data which we bind to our parent repeater control C#. Code looks like as written below.

Hit F5 and see this is how our repeater control looks after data binding.

OUT SCREENSHOT:Bind Repeater control with database

Now the main part of this post, Using nested repeater control in c#  here we are going to display hierarchical data from database .i.e player information (player name,  role, photo) with respected teamId.

# Bind child-Repeater with child table data:

Here we will add another repeater control (nested repeater control) which shows player information and the whole visual would be like hierarchical data.

Our HTML markup of childRepeater control looks like as written below. And set the DataSource of childRepeator control as shown follow.

 Note: Add child repeater control to the ItemTemplate property of parentRepeater Control.

After setting DataSource, our both repeater control (child/parent) HTML markup looks like as written below:

# Now get back to code behind:

On button_click we already added a method name nestedRepeaterControl(), now we need to edit that method.

We create another DataAdapter for table playerInfo and add this playerInfo table to DataSet and then will add a relationship between these to DataTable (teamInfo / playerInfo). The final code looks like as written below.

When you run page you will get this  Error:

ERROR: CS0246: The type or namespace name ‘DataRowView’ could not be found (are you missing a using directive or an assembly reference?)

To solve above error, we need to add this piece of code on our Webform .aspx  page

Finally, we are done and here the output:

OutPut:Display hierarchical data using nested repeater control in C#

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!