How to manually set data for kendoui treelist

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>

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.