PushCreate children nodes in Kendo HierarchicalDataSource

Question

I'm trying to show a Kendo TreeView configured with remote data, but prefill the first two levels with data loaded directly from the html.

For that, I want to use the pushCreate method of the Kendo dataSource to add the initial elements to the tree:

homogeneous = new kendo.data.HierarchicalDataSource({
    transport: { read: { url: serviceRoot + "/Employees", dataType: "jsonp" } },
    schema: {
        model: {
            id: "EmployeeId",
            hasChildren: "HasEmployees"
        }
    }
});

// Adding root
homogeneous.pushCreate({"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null});

// Adding children
homogeneous.pushCreate([
    {"EmployeeId":1,"FullName":"Nancy Davolio","HasEmployees":false,"ReportsTo":2},
    {"EmployeeId":3,"FullName":"Janet Leverling","HasEmployees":false,"ReportsTo":2},
    {"EmployeeId":4,"FullName":"Margaret Peacock","HasEmployees":false,"ReportsTo":2},
    {"EmployeeId":5,"FullName":"Steven Buchanan","HasEmployees":true,"ReportsTo":2},
    {"EmployeeId":8,"FullName":"Laura Callahan","HasEmployees":false,"ReportsTo":2}
]);

$("#treeview").kendoTreeView({
    dataSource: homogeneous,
    dataTextField: "FullName"
});

However, the children elements are added to the root level (you can see this running here).

There is a schema.model.children configuration to set the property that holds the children inside the root element and I can add all in one go, but if I use that then the dataSource stops working with remote data (you can see that running here).

So the question is, is there a way to use pushCreate to add elements as children of another one on a HierarchicalDataSource?

Answer 1

I found the answer while writting the question :)

It seems like if I simply use items as the key for the children, I don't need to specify the schema.model.children option so the tree still works with remote data:

homogeneous.pushCreate(
    {"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null,
        "items": [
            {"EmployeeId":1,"FullName":"Nancy Davolio","HasEmployees":false,"ReportsTo":2},
            {"EmployeeId":3,"FullName":"Janet Leverling","HasEmployees":false,"ReportsTo":2},
            {"EmployeeId":4,"FullName":"Margaret Peacock","HasEmployees":false,"ReportsTo":2},
            {"EmployeeId":5,"FullName":"Steven Buchanan","HasEmployees":true,"ReportsTo":2},
            {"EmployeeId":8,"FullName":"Laura Callahan","HasEmployees":false,"ReportsTo":2}
        ]
    }
);

Here's the working example.

I don't know if that's and unintended feature but works for adding a whole subtree to the root (which solves my problem). However the question still stands, can I use pushCreate to add a child element to another one?

Answer 2

You can do this by appending the node element with append. See this example by telerik: http://dojo.telerik.com/AjIti/32