Kendo UI TreeList - Datasource Binding issue

Question

I'll apologize if this is easy, but Google has failed me.

I have a call back that runs once data has been received from a service. I'm trying to take that data, create a few data sources, and bind them to a few controls.

I've simplified the code down

This works:

function onDataLoad (inData) {

    $("#treelist").kendoTreeList({
        resizable: true,
        width: "100%",
        "columns": gridColumns,
        "dataSource": {
            data: inData,
            schema: {
                data: "returnsData"
            }
        }
    });
};

However, if I take that data source definition and try to move it out, I get a "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" error.

function onDataLoad (inData) {

    var returnsDataSource = new kendo.data.DataSource({
            data: inData,
            schema: {
                data: "returnsData"
            }
        });

    $("#treelist").kendoTreeList({
        resizable: true,
        width: "100%",
        "columns": gridColumns,
        "dataSource": returnsDataSource
    });
};

What am I doing wrong here?

Answer 1

You need to use TreeListDataSource instead of DataSource:

var returnsDataSource = new kendo.data.TreeListDataSource({
        data: inData,
        schema: {
            data: "returnsData"
        }
    });

See http://demos.telerik.com/kendo-ui/treelist/local-data-binding for an example.