Nested data sources and TreeView with kendo ui

Question

I am having problems with a Hierarchical data source in combination with a TreeView and an attachment. The goal is to show a tree structure with root elements such as “employees”, “profiles” and sub-items that are acutal elements. Therefore, each root element uses a different data source. This does not work, as the root nodes do not expand until the data source seems to load perfectly. Here is the code:

$(document).ready(function() { var userProfileDataSource = new kendo.data.HierarchicalDataSource( { transport: { read: function (options) { var items = [ { text: "userprofile 1", hasChildren: false }, { text: "userprofile 2", hasChildren: false } ]; options.success(items); } } }), categories = new kendo.data.HierarchicalDataSource({ transport: { read: function(options) { options.success([ { text: "Employees", hasChildren: false }, { text: "UserProfiles", children: userProfileDataSource, hasChildren: true } ]); } } }); $("#navigation-treeview").kendoTreeView( { dataSource: categories } ); }); 

Jsfiddle

Any ideas?