Kendo TreeView

Demonstrates an issue where the TreeView doesn't seem to populate child nodes.

by Josh Carroll

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<h3>Parent Element is a <code>&lt;div&gt;&lt;/div&gt;</code></h3>

<div id="treeViewDiv"></div>

<h3>Parent Element is an <code>&lt;ul&gt;&lt;/ul&gt;</code></h3>
<p>You can see the calls to the fake service in the console, but the elemts are never added to the DOM and never expanded.</p>

<ul id="treeViewUl"></ul>

JavaScript

(function () {

    function getAssignedNodes(id, parentId) {
        var def = jQuery.Deferred();

        setTimeout(function () {
            def.resolve([{
                nodeId: curId++,
                nodeName: "My Node",
                hasChildren: true
            },{
                nodeId: curId++,
                nodeName: "My Node",
                hasChildren: true
            }]);
        }, 250);

        return def.promise();
    }

    var curId = 1,
        createDataSource = function () {
            return new kendo.data.HierarchicalDataSource({
                transport: {
                    read: function (options) {
                        getAssignedNodes(4, options.data.nodeId)
                            .then(function (data) {

                            console.log(kendo.format("Children of: {0}", options.data.nodeId));
                            console.log(data);

                            options.success(data);
                        });
                    }
                },
                schema: {
                    model: {
                        id: "nodeId",
                        hasChildren: "hasChildren"
                    }
                }
            });
        };

    $("#treeViewUl").kendoTreeView({
        dataTextField: "nodeName",
        dataSource: createDataSource()
    });

    $("#treeViewDiv").kendoTreeView({
        dataTextField: "nodeName",
        dataSource: createDataSource()
    });

}());