嵌套的DataSources和带有kendo ui的TreeView

Question

我遇到了与TreeView和嵌套一起使用Hierarchical Data Source的问题。目标是显示一个树视图，其中的根项目如“employees”，“profiles”和子项目是实际项目。所以每个根项都使用不同的数据源。这不起作用，因为根节点没有扩展，而数据源似乎完全加载。  这是代码：

$(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

有什么想法吗？