TreeView LoadOnDemand

by gyoshev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://gyoshev/kendo/deploy/kendoui.complete.commercial/js/kendo.all.min.js"></script>
<ul id="tree">
    <li id="item1">Item 1
        <ul>
            <li></li>
        </ul>        
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

body {
    font: 12px Tahoma,sans-serif;
}

JavaScript

$(function() {
    function appendNodes(node, subNodes, treeView) {
        var dummyNode = { text: "" };
        node = $(node);
        
        $.each(subNodes, function() {
            node.find('.k-icon:first').removeClass('k-loading');
            
            var appendedNode = treeView.append({
                text: this.Text
            }, node);
            
            if (this.HasChilds) {
                treeView.append(dummyNode, appendedNode);
                
                //treeView.collapse(appendedNode);
            }
        });
    }

    $('#tree').kendoTreeView({
        expand: function(e) {
            var treeView = $('#tree').data('kendoTreeView'),
                node = $(e.node),
                nodes;
            
            if (node.find('ul:first li').length == 1 &&
                node.find('ul:first li:first .k-in').text() == "") {
                    
                node.find('.k-icon:first').addClass('k-loading');
                node.find('ul:first').html("");
                    
                if (node.is('#item1')) {
                    nodes = [{
                        Text: "Item 1.1",
                        HasChilds: true
                    }, {
                        Text: "Item 1.2",
                        HasChilds: true
                    }, {
                        Text: "Item 1.3",
                        HasChilds: false
                    }, {
                        Text: "Item 1.4",
                        HasChilds: false
                    }, {
                        Text: "Item 1.5",
                        HasChilds: false
                    }];
                } else if (node.find('.k-in:first').text() == "Item 1.1") {
                    nodes = [{
                        Text: "Item 1.1.1",
                        HasChilds: true
                    }];
                } else if (node.find('.k-in:first').text() == "Item 1.1.1") {
                    nodes = [{
                       ...