Kendo UI Treeview giving error "Uncaught TypeError: Object [ has no method 'level' "

Question

I am using a HierarchicalDataSource to populate a TreeView object through ajax call. My javascript:

$(document).ready(function() {
var dataSource = new kendo.data.HierarchicalDataSource({
    transport: {
        read: "ajax/call/url.json",
        dataType: "jsonp",
        parameterMap: function (data, action) {
            if (action == "read") {
                return {
                    id: $("#id").val()
                };
            }
        }
    }
});

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

The ajax call is performed successfully and the data I receive are the following:

[
{id: -1, text: "A", expanded: true, items: 
    [
    {id: 1, text: "A1", checked: false}
    ]
},
{id: -1, text: "B", expanded: true, items: 
    [
    {id: 2, text: "B1", checked: false},
    {id: -1, text: "B2", expanded: true, items: 
        [
        {id: 3, text: "B21", checked: false},
        {id: 4, text: "B22", checked: false}
        ]
    },
    {id: -1, text: "B3", expanded: true, items: 
        [
        {id: 5, text: "B31", checked: false},
        {id: 6, text: "B32", checked: false}
        ]
    }
    ]
}
]

After the ajax call and before the TreeView renders (it still shows the loading animation) I receive the error:

Uncaught TypeError: Object [ has no method 'level'

If I copy the received data inside the HierarchicalDatasource (data: "...") the TreeView renders just fine and works like a charm. The issue is when trying to bind to remote data. Why does this issue occur? Have I not configured the HierarchicalDataSource properly?

Answer 1

I have resolved the reported issue. The data I receive in my original post came as a string, exactly as I showed it, minus the spaces and new lines. What I do with these data now is converting it to a Javascript array:

var dataSource = new kendo.data.HierarchicalDataSource({
transport: {
    read: "url/to/ajax/service",
    parameterMap: function (data, action) {
        if (action == "read") {
            return {
                id: $("#id").val()
            };
        }
    }
},
schema: {
    model: {
        children: "items",
        id: "id",
        checked: "checked"
    },
    data: function(data) {
        var dataArray = eval(data);
        return dataArray;
    }
}
});

var treeView = $("#treeView").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },
    loadOnDemand: false,
    dataSource: dataSource,
    dataTextField: "text"
});

Works fine now.

Answer 2

assuming your backend is written in php, add this

header('Content-Type: application/json');

before sending anything else.

it did the trick for me.

Answer 3

May be the json format is not correct. It has to be serialized.