Kendo Treeview

Kendo Treeview with Hierachical Data-Source

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<div id="navigation-treeview"></div>

JavaScript

$(document).ready(function () {
    var userProfileDataSource = {
        transport: {
            read: function (options) {
                if (options.data.text == "UserProfiles") {
                    var items = [{
                        text: "userprofile 1",
                        hasChildren: false
                    }, {
                        text: "userprofile 2",
                        hasChildren: false
                    }];
                    options.success(items);
                }
            }
        }
    },
    categories = new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (options) {
                options.success([{
                    text: "Employees",
                    hasChildren: false
                }, {
                    text: "UserProfiles",
                    hasChildren: true
                }]);
            }
        },
        schema: {
            model: {
                children: userProfileDataSource,
                id: "text"
            }
        }
    });

    $("#navigation-treeview").kendoTreeView({
        dataSource: categories
    });
});