Tree in Ignite | Infragistics Forums

Thanks for the mail. I attached the Sample for your reference .Now my concern is how to populate the data dynamically . In this sample we hard coded . I want these information fetch into DB and load <!DOCTYPE html>
<html>
<head>
    <title>Tree View</title>
    <script src="script/jquery-1.9.1.min.js"></script>
    <script src="script/jquery-ui.min.js"></script>
    <style type="text/css">
.treeview {
    color: #888;
    font-family: 'Linux Biolinum O';
    padding: 15px;
}
.treeview:nth-child(even){background:#ccc;}

.tree-element {
    padding-left: 26px;
    cursor: pointer;
    font-weight: 600;
}

.folder{background:url(./images/folder-small.png) 0 0 no-repeat;}
.tree-element * {
    font-weight: 300;
}

.inline-block {
    display: inline-block;
    border: 1px solid red;
}

.tree-indicator {
    left: -40px;
    margin-right: -22px;
    position: relative;
    float: left;
    font-size: small;
}

.test .tree-indicator {
    float: none;
}

.align-right {
    float: right;
}

.align-right::after {
    clear: both;
}

.treeview a {
    display: block;
    color: #888;
    padding-bottom: 8px;
    text-decoration: none;
}

.new-unread {
    display: inline-block;
    border-radius: 50%;
    height: 60%;
    width: 20px;
    text-align: center;
    font-size: 7pt;
    background-color: purple;
    font-weight: bold;
    color: white;
    vertical-align: baseline;
}
.ppt{background:url(./images/ppt.png) 0 0 no-repeat;padding: 0 0 0 20px;}
.word{background:url(./images/word.png) 0 0 no-repeat;padding: 0 0 0 20px;}
.pdf{background:url(./images/pdf.png) 0 0 no-repeat;padding: 0 0 0 20px;}
</style>
<script type="text/javascript">

    $(function() {
        $('.treeview .tree-element').addClass('collapsed').children('.tree-element').css('display', 'none')
    });

    $(function() {
        $('.treeview .tree-element')
    .click(function(evt) {

        evt.stopPropagation();

        $(this).children('.tree-element').slideToggle().promise().done(function() {
            var isCollapsed = $(this).css('display') == 'none';
            $(this)
                .parent()
                    .removeClass('collapsed expanded')
                    .addClass(isCollapsed ? 'collapsed' : 'expanded')
                    .children('.tree-indicator')
                        .html(isCollapsed ?
                              $(this).closest('.treeview').attr('data-ui-collapsed-indicator') :
                              $(this).closest('.treeview').attr('data-ui-expanded-indicator')
                        );
        });
    }).each(function() {
        var c = $(this).hasClass('collapsed');
        if (c) $(this).children('.tree-element').hide();
        $(this).prepend(
            $('<span>')
                .addClass('tree-indicator')
            .html($(this).closest('.treeview').attr('data-ui-' + (c ? 'collapsed' : 'expanded') + '-indicator'))
                .css('opacity', $(this).children('.tree-element').length ? 1 : 0)
        );
    });
    });

</script>
</head>

<body>

<div class="treeview" style="width: 200px" data-ui-collapsed-indicator="▶" data-ui-expanded-indicator="▼">

    <div class="tree-element folder">Folder1
        <div class="tree-element folder">Sub Folder
        <div class="tree-element">
            <a href="#" class="ppt">File.PPT</a>
            <a href="#" class="word">File.DOC</a>
            <a href="#" class="pdf">File.PDF</a>
        </div>
    </div>
    </div>

    <div class="tree-element folder">Folder2
        <div class="tree-element folder">Sub Folder
        <div class="tree-element">
            <a href="#" class="ppt">File.PPT</a>
            <a href="#" class="word">File.DOC</a>
            <a href="#" class="pdf">File.PDF</a>
        </div>
    </div>
    </div>

</div>
</body>
</html>