Kendo UI Treeview with check-boxes, Hierarchical Data Source not fully loaded

Question

Using the example at Kendo-ui Demo page I now have the following code

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        data: [
            { 
                id: 1, text: "Useraccess", expanded: true, items: [
                    { id: 2, text: "Roles", items: [
                        { id: 3, text: "Access", checked: true },
                        { id: 4, text: "Edit", checked: true }
                    ]},
                    { id: 5, text: "Users", items: [
                        { id: 6, text: "Access" },
                        { id: 7, text: "Edit" }
                    ]}
                ]
            },
            {   
                id: 8, text: "Customer", expanded: true, items: [
                    { id: 9, text: "Customer", items: [
                        { id: 10, text: "Access" },
                        { id: 11, text: "Edit", checked: true }
                    ]},
                    { id: 12, text: "Account", items: [
                        { id: 13, text: "Access" },
                        { id: 14, text: "Edit" }
                    ]}
                ]
            }
        ]
    });

    $("#treeView").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        dataSource: dataSource
    });

    // function that gathers IDs of checked nodes
    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].checked && !nodes[i].hasChildren) {
                checkedNodes.push(nodes[i].id);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    function refreshResult() {
        var checkedNodes = [],
            treeView = $("#treeView").data("kendoTreeView"),
            message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

        if (checkedNodes.length > 0) {
            message = "IDs of checked nodes: " + checkedNodes.join(",");
        } else {
            message = "No nodes checked.";
        }

        $("#result").html(message);
    }

    // show checked node IDs on datasource change
    $("#treeView").data("kendoTreeView").dataSource.bind("change", function() {
        refreshResult();
    });

    refreshResult();
</script>

When the page is loaded, the result text is "No nodes checked.", even though there are indeed 3 nodes checked. While debugging, I noticed that even though the "Roles" node has the attribute hasChildren = true, the children array is empty. In the example in the Demo page, the data source is defined inside the TreeView:

 $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },

        dataSource: [
            { 
                id: 1, text: ....

When I define the data source inside the Treeview, the result text shows the correct nodes as selected. Is there a way to simulate that behaviour? I am planning to use remote data in the future.

Answer 1

I have found the answer in the TreeView API. The answer is here:

loadOnDemand TreeView configuration

So what I need to do is set loadOnDemand: false inside the TreeView:

$("#treeView").kendoTreeView({
loadOnDemand: false, ...