How to manually set data for kendoui treelist - kendo-ui

Question

I want to set the datasource for a kendoui treelist at the run time. Please check following example. If I set the datasource at the design time, I am able to see the data in the control. But if I try to set the datasource at run time, I do not see the data in the control.
<div id="treeList"></div>
<script>
var data = [ { name: "Jane Doe" }, { name: "John Doe" }];
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
//,dataSource: dataSource
});
var grid = $("#treelist").data("kendoTreeList");
grid.setDataSource( dataSource);
grid.dataSource = dataSource;
grid.dataSource.read();
grid.dataSource.data(data);
</script>

Answer 1

The problem seems to be with the selector itself. You logic was ok but for some reason, the object returned by data("kendoTreeList") was null. I updated your code to chain the data after the kendoTreeList initialization.
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
var grid = $("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
}).data("kendoTreeList");
grid.setDataSource(dataSource);
It's a bit odd to say but I thought your code and my code would be equivalent. Obviously, it ain't but I can't figure out why.

Answer 2

Your main problem is that you have the id to the DOM element set to "treeList".
var grid = $("#treelist").data("kendoTreeList");
As you can see here, you use all lowercase when setting the grid variable. That was your only problem. It should look like this:
var grid = $("#treeList").data("kendoTreeList");