Kendo TreeView with remote datasource only populates the root elements

Question

I am having difficulty in fully populating a Kendo TreeView with a remote datasource, although with a local datasource it works fine.

In short, the first sample below uses a local datasource. This all works perfectly:

// local datasource, works perfectly
var local = new kendo.data.HierarchicalDataSource({
    data: [
        {
            "DeviceGroupId": 1,
            "DeviceGroupName": "Superdeluxe Devices",
            "Devices": [
                {
                    "Id": 1000,
                    "Name": "My First Device"
                },
                {
                    "Id": 1001,
                    "Name": "My Second Device"
                }
            ]
        }
    ],
    schema: {
        model: {
            children: "Devices"
        }
    }
});

// initialize - this works!
$("#list-of-devices").kendoTreeView({
    dataSource: local,
    dataTextField: ["DeviceGroupName", "Name"],
    loadOnDemand: false
});

Again, the sample above works just fine. Now, the second sample below does not: it only populates the treeview's root element ("Superdeluxe Devices"). And it totally ignores the children.

// remote datasource
var remote = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "/api/devices/list", // <-- confirmed this works
            dataType: "json",
            contentType: "application/json"
        },
        schema: {
            model: {
                children: "Devices"
            }
        }
    }
});

// initialize
$("#list-of-devices").kendoTreeView({
    dataSource: remote, // the issue: only shows top level nodes
    dataTextField: ["DeviceGroupName", "Name"],
    loadOnDemand: false
});

So, the issue in the second sample is that only the top level nodes are shown, without any option to expand.

I have looked into the following:

The data in both datasources, local and remote, are identical (I copied the results from remote into local)
Enabled/disabling the loadOnDemand option, now setting it by default to 'false'
Mapping stuff through the schema.data and schema.parse functions to no effect
Looked into the both the HierarchicalDataSource API and the TreeView API, as well as the Binding to remote data demo
Looked into older UserVoice issue, which indicates that it's possible now to fully load and render a TreeView

Summarized, I can't seem to figure out why the local variant works perfectly - and the remote does not show the children. Any suggestions?

OnaBai OnaBai · Accepted Answer · 2015-01-21T07:26:33

The problem is in your remote DataSource definition where you defined the schema.model as part of the transport and it is not. It should be:

var remote = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "list.json",
            dataType: "json",
            contentType: "application/json"
        }
    },
    schema: {
        model: {
            children: "Devices"
        }
    }
});

schema is at the same level than transport.

Kendo TreeView with remote datasource only populates the root elements

1 Answers