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?

Answer 1

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.