Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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.

Background

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:

http://msdn.microsoft.com/en-us/library/bb498210.aspx

http://www.asp.net/web-forms/tutorials/getting-started-with-ef/the-entity-framework-and-aspnet-getting-started-part-1

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>
    </hgroup>

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

                                </ul>
                            </li>
                        </ul>
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <asp:EntityDataSource ID="enttdsEmployee" runat="server" ConnectionString="name=Hierarchy_Data_TestEntities" DefaultContainerName="Hierarchy_Data_TestEntities" EnableFlattening="False" EntitySetName="Employees"></asp:EntityDataSource>
    </section>
</asp:Content>

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.

JQuery

$(".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 | :) .

License

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

Share

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 PinmemberDewey16-May-14 16:59 
QuestionExcellent PinmemberBeeWayDev16-May-14 13:41 
QuestionA few points PinmemberDewey15-May-14 22:12 
AnswerRe: A few points PinmemberAhmad F Hassan16-May-14 4:58 
GeneralRe: A few points PinprotectorMarco Bertschi16-May-14 5:52 
GeneralRe: A few points PinmemberAhmad F Hassan16-May-14 9:48 
GeneralRe: A few points PinprotectorMarco 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
Web01 | 2.8.141220.1 | Last Updated 16 May 2014
Article Copyright 2014 by Ahmad F Hassan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid