Kendo UI Treeview not expanding nodes

Question

I have a Kendo UI treeview bound to remote data; however, while top level items are showing, and the arrow indicates there are children items, clicking the arrow does nothing but spin--no expansion to show child nodes. Any help would be appreciated.

My code looks like this:

var industryTree = new kendo.data.HierarchicalDataSource({
     transport: {
         read: {
             url: 'http://'+document.domain+'/services/TreeIndustries.php',
             dataType: "json"
         },
         schema: {
             model: {
                id:"id"
             }  
         }
     }
});

My tree init:

 var industryTreeView=$("#industry-tree").kendoTreeView({
     dataSource: industryTree,
     dataTextField: ["text","text"]

 });

The JSON returned validates correctly; anyone wanting a look can check it out here:

http://173.45.233.104/services/TreeIndustries.php

Have you tried setting the loadOnDemand property to false as per: docs.kendoui.com/api/web/treeview#configuration-loadOnDemand — boniestlawyer

OnaBai OnaBai · Accepted Answer · 2013-07-02T14:29:41

I'm very sorry but seems that there is a limitation on the valid names for "children" and children is not a valid name.

There is also the question that you have defined schema inside transport when they should be at the same level:

var industryTree = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: 'http://'+document.domain+'/services/TreeIndustries.php',
            dataType: "json"
        }
    },
    schema: {
        model: {
            id:"id"
        }
    }
});

If you change your JSON and replace children by items, kids or even _children it should work.

In addition, remember to set loadOnDemand as false to have the full tree loaded.

With these, your DataSource should look like:

var industryTree = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url     : 'http://' + document.domain + '/services/TreeIndustries.php',
            dataType: "json"
        }
    },
    schema   : {
        model: {
            id      : "id",
            children: "_children"
        }
    }
});

And the tree initialization:

var industryTreeView = $("#industry-tree").kendoTreeView({
    loadOnDemand : false,
    dataSource   : industryTree,
    dataTextField: "label"

});

Kendo UI Treeview not expanding nodes

1 Answers