Manually change data items in datasource

Question

I have the following datasource with data set to an array.

var dataArray = [
    { Id: 1, Name: "RootA", ParentId: null },
    { Id: 2, Name: "ChildA", ParentId: 1 },
    { Id: 3, Name: "RootB", ParentId: null },
    { Id: 4, Name: "ChildB", ParentId: 3 },
    { Id: 5, Name: "RootC", ParentId: null }
];

var treeListDataSource = new kendo.data.TreeListDataSource({
    data: dataArray,
    schema: {
        model: {
            id: "Id",
            fields: {
                parentId: { field: "ParentId", type: "number", nullable: true },
                Id: { field: "Id", type: "number" }
            }
        }
    }
});

This works.

Now I want to change the items in dataArray to:

var newData = [
    { Id: 6, Name: "RootD", ParentId: null },
    { Id: 7, Name: "ChildD", ParentId: 6 },
    { Id: 8, Name: "RootE", ParentId: null }
];

I tried:

• Just setting it: dataArray = newData;
• Setting via the data() method in the kendo datasource: treeListDataSource.data(newData)

But the grid doesn't display the new values. Instead is just says "no records".

Here's a demo.

Answer 1

I managed to get it working using the transport API. http://dojo.telerik.com/OBUSU/4

var treeListDataSource = new kendo.data.TreeListDataSource({
    transport: {
        read: function (options) {
          var data = dataArray;
          options.success(data);
        }
    },
    ...
});

function change() {
    var newData = [
        { Id: 6, Name: "RootD", ParentId: null },
        { Id: 7, Name: "ChildD", ParentId: 6 },
        { Id: 8, Name: "RootE", ParentId: null }
    ];
    dataArray = newData;
    treeListDataSource.read();
};