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

/ / 2 Comments

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

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

What is Asp.net Repeater Control?

The Repeater control is a container control that allows you to create custom lists out of any data that is available on 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 Asp.net Web Application to display hierarchical data using nested Repeater Control C#Display hierarchical data using nested repeater control in Asp.net 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 team_info, player_info. We are going to display the list of IPL teams (data as team name, 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 the default Asp.net Web Form ( .aspx page).

Now we added an asp.net 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 that we will add some HTML tags under <itemtemplate>. The html markup of repeater control looks like as written below.

//*
<asp:Repeater ID="rptParent" runat="server">
 <ItemTemplate><img src='<%# DataBinder.Eval(Container.DataItem,"logo") %>'>
  <b>Teame Name:</b> <%# DataBinder.Eval(Container.DataItem,"team_name") %>
  <b>Owner:</b><%# DataBinder.Eval(Container.DataItem,"owner_name") %>
 </ItemTemplate>
</asp:Repeater>
//*

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

Also Read: How to Export Gridview Data to Excel in Asp.net C#.


# Code behind:

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

Now, this teamInfo table contains data that we bind to our parent repeater control C#. The code looks like as written below.

//*
public void nestedRepeaterControl() {
   DataSet ds = new DataSet();
   SqlDataAdapter dap = new SqlDataAdapter("select * from team_info",cn);
   dap.Fill(ds, "teamInfo");
   rptParent.DataSource = ds.Tables["teamInfo"]; 
   rptParent.DataBind();
}
//*

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

OUT SCREENSHOT:Bind asp.net Repeater control with database

Now the main part of this post, Using nested repeater control in Asp.net 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 as written below. And set the DataSource of childRepeator control as shown follow.

//*
<asp:Repeater ID="child_Repeater" runat="server" DataSource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>'>
  <HeaderTemplate>
    <ul>
  </HeaderTemplate>
  <ItemTemplate>
   <li>Player Name:<%# DataBinder.Eval(Container.DataItem,"player_name") %>
       Role :<%# DataBinder.Eval(Container.DataItem,"role") %>
   </li>
  </ItemTemplate>
  <FooterTemplate>
    </ul>
  </FooterTemplate>
</asp:Repeater>
//*
 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:

//*
<asp:Repeater ID="parent_Repeater" runat="server">
  <HeaderTemplate>
       <ul>
  </HeaderTemplate>
  <ItemTemplate>
    <li><img src='<%# DataBinder.Eval(Container.DataItem,"logo") %>'>
      <div class="lg wd50">
      <b>Team Name :</b>
      <%# DataBinder.Eval(Container.DataItem,"team_name") %>
      <b>
      </div>
      <div class="rg wd50">
      Owner :</b><%# DataBinder.Eval(Container.DataItem,"owner_name") %>
      </div>
    </li>
    <li>
     <asp:Repeater ID="child_Repeater" runat="server" DataSource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>'>
     <HeaderTemplate>
          <ul>
     </HeaderTemplate>
     <ItemTemplate>
     <li>Player Name:<%# DataBinder.Eval(Container.DataItem,"player_name") %>
         Role :<%# DataBinder.Eval(Container.DataItem,"role") %>
     </li>
     </ItemTemplate>
     <FooterTemplate>
       </ul>
     </FooterTemplate>
     </asp:Repeater>
   </li>
   </ItemTemplate>
   <FooterTemplate>
   </ul></FooterTemplate>
</asp:Repeater>
//*
Also Read: On Mouseover Gridview Row Show Detail Data in Floating Div Asp.net C# jQuery.

# 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.

//*
public void nestedRepeaterControl() {
 DataSet ds = new DataSet();
 SqlDataAdapter dap = new SqlDataAdapter("select * from team_info",cn);
 dap.Fill(ds, "teamInfo");

 SqlDataAdapter dap2 = new SqlDataAdapter("select * from player_info", cn);
 dap2.Fill(ds, "playerInfo");
 
 // Add relation 
 ds.Relations.Add("myrelation", 
          ds.Tables["teamInfo"].Columns["id_team"], 
          ds. Tables["playerInfo"].Columns["id_teamOf"], 
          false);
 parent_Repeater.DataSource = ds.Tables["teamInfo"];
 parent_Repeater.DataBind();
}
//*

When you run the 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 the above error, we need to add this piece of code on our Webform .aspx  page

//*
<%@ Import Namespace="System.Data" %>
//*
Finally, we are done, and here is the output:

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

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

2 Comments