Click here to Skip to main content
12,691,777 members (31,388 online)
Click here to Skip to main content
Add your own
alternative version


10 bookmarked

ASP .NET Data Repeater for hierarchical data source

, 16 May 2014 CPOL
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 :), 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 :).


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

You may also be interested in...


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    Praise Praise    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
Web02 | 2.8.170117.1 | Last Updated 16 May 2014
Article Copyright 2014 by Ahmad F Hassan
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid