Click here to Skip to main content
11,484,752 members (74,258 online)
Click here to Skip to main content

ASP .NET Data Repeater for hierarchical data source

, 16 May 2014 CPOL 5.2K 6 10
Rate this:
Please Sign up or sign in to vote.
An easy way to view hierarchical data in a simple ASP .NET Repeater


I am working on a project which i need to implement blog functionality, everything was going fine until I started implementing the comment/reply thing, I needed to store the data hierarchically (self-join) in the database but I couldn't find any control in google!! to show them this way, so used the Data Repeater with few JQuery lines and, Bingo!!! it's easier than it looks like, So I made it reusable and I want to share it with you guys Smile | :) , I made a simple Employee-manager page which list all employees under there managers.


This tip is for ASP .NET developers, It is not an advance topic, I used EntityDataSource but you can use any other source acceptable by the repeater, I assume that you at least used Entity Framework, Data Repeater and JQuery before. if not, you can refer to:

My Data

In the database the table looks like this:

and the Data Model Looks Like this:

My Markup

<%@ Page Title="Contact" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="WebApplication2.Contact" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <hgroup class="title">
        <h1><%: Title %>.</h1>
        <h2>Your contact page.</h2>

    <section class="contact">
        <div class="employees-container">
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="enttdsEmployee">
                    <ul class="employee-data-listing">
                    <li class="employee-list-item" data-Id='<%# Eval("Id") %>' data-manager='<%# Eval("Manager") %>'>
                        <ul class="employee-data">
                                <asp:Label ID="lblId" CssClass="primary-key" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                                <asp:Label ID="lblPhone" runat="server" Text='<%# Eval("Phone") %>'></asp:Label>
                                <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                                <ul class="inner-employee">

        <asp:EntityDataSource ID="enttdsEmployee" runat="server" ConnectionString="name=Hierarchy_Data_TestEntities" DefaultContainerName="Hierarchy_Data_TestEntities" EnableFlattening="False" EntitySetName="Employees"></asp:EntityDataSource>

If you run the application now you will get this:

Now, the keys are the attributes data-Id and data-manager on the first <li> in the ItemTemplate, this way, using JQuery we can get all employees data-Id and his/her manager data-manager id to use in the next section.


$(".employee-list-item").each(function () {
    var id = $(this).attr("data-Id");
    $(".employee-list-item[data-manager='" + id + "']")
        .appendTo(".employee-list-item[data-Id='" + id + "'] .inner-employee");

What the above code does, is looping through all the <li>s that represents an employee (".employee-list-item") and storing there Id from data-Id in var id , and for each one, we are moving all employees with the manager id (data-manager) equals the stored id to the (inner employee <ul>). this is being done recursively and we will end up with this:

Give it a try!!

Please let me know if you have any comments/questions. Please, vote up and share if you find this helpful Smile | :) .


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ahmad F Hassan
Software Developer EXCEED IT Services
United Arab Emirates United Arab Emirates
No Biography provided

Comments and Discussions

QuestionGreat Updates, have a 5 Pin
Dewey16-May-14 16:59
memberDewey16-May-14 16:59 
QuestionExcellent Pin
BeeWayDev16-May-14 13:41
memberBeeWayDev16-May-14 13:41 
QuestionA few points Pin
Dewey15-May-14 22:12
memberDewey15-May-14 22:12 
AnswerRe: A few points Pin
Ahmad F Hassan16-May-14 4:58
memberAhmad F Hassan16-May-14 4:58 
GeneralRe: A few points Pin
Marco Bertschi16-May-14 5:52
protectorMarco Bertschi16-May-14 5:52 
GeneralRe: A few points Pin
Ahmad F Hassan16-May-14 9:48
memberAhmad F Hassan16-May-14 9:48 
GeneralRe: A few points Pin
Marco Bertschi16-May-14 13:52
protectorMarco Bertschi16-May-14 13:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 16 May 2014
Article Copyright 2014 by Ahmad F Hassan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid