Nested DataSources and TreeView

[Ivan]

Hi,

i am having trouble with the Hierarchical Data Source in conjunction with the TreeView and nesting. The goal is to show a treeview with root items like "employees", "profiles" and sub items being the acutal items. So every root item is using a different data source. This is not working, as the root nodes are not expanding while the data source seems to load perfectly.
I have prepared a small fiddle to show the problem: http://jsfiddle.net/ruapho/GaFd6/4/

Any ideas?

[Daniel]

Hello Ivan,

I posted my reply in the support ticket on the same topic. For convenience I am pasting it below:

This is not supported. You should use a single child dataSource and determine which items to be loaded based on the ID that is passed to the read method. I have updated the jsFiddle to show this approach.

Regards,
Daniel
the Telerik team

[Eric]

I just ran into this issue today.  Until now, I hadn't seen that this wasn't possible.  I thought it would be okay because the documentation for HierarchicalDataSource shows how to chain them.  I replaced with homogenous and now all is well.  Perhaps the control could throw an error if you attempt this and/or have it documented under dataSource for kendo.ui.TreeView?

Error details:
In my case, it was throwing an error in kendo.custom.min.js on:
o=s.aggregate,l=s.field,e[l]=e[l]||{},e[l][o]=L[o.toLowerCase

o.toLowerCase fails because o is undefinied.  It appears that s exists but the "aggregate" property does not.  I was assuming it was the datasource property, but setting that didn't seem to do anything for me.  

[Daniel]

Hello,

Could you provide the setup that you tried to used and explain the problem in more detail? The issue discussed here is about configuring a different dataSource for each root node.

Regards,
Daniel
Telerik

[Eric]

I'd need to dig up the server side methods from source control.  Going with one data source did work.  The return from both server side ajax calls were the same schema (TreeViewItem kendo .net).  I did use fiddler and verify that the data from the child call was coming back to the client.  

<div id="treeView"></div>

<script type="text/javascript">
    function commonParse(response)
    {
        return $.map(response, function(x) {
            x.expanded = x.Expanded;

            return x;
        });
    }
    
    function ready() {
        var dataSourceThreats = new kendo.data.HierarchicalDataSource(
            {
                transport: {
                    read: {
                        url: ROOT_PATH + "Components/Threats",
                        dataType: "json",
                        type: "POST"
                    }
                },
                schema:  {
                    parse: commonParse,
                    model: {
                        id: "Id",
                        hasChildren: "HasChildren",
                        //children: "Items"
                    }
                },
                aggregate : null
            }
        );
        var dataSourceThreatsStatus = new kendo.data.HierarchicalDataSource(
            {
                transport: {
                    read: {
                        url: ROOT_PATH + "Components/ThreatsStatus",
                        dataType: "json",
                        type: "POST"
                    }
                },
                schema: {
                    //data: "Items",
                    parse: commonParse,
                    model: {
                        id: "Id",
                        hasChildren: "HasChildren",
                        children: dataSourceThreats
                    }
                }
            }
        );

        
            
        var kendoTreeView = $("#treeView").kendoTreeView({
            dataSource: dataSourceThreatsStatus,
            dataTextField: "Text",
            dataUrlField: "Url",
            dragAndDrop: false,
            expand: onExpand,
            loadOnDemand: true
        });
</script>

[Eric]

The output of both method calls (Threats and ThreatsStatus) were Json(IList<TreeViewItem>)

[Daniel]

Hello,

The problem will occur because the children configuration option is set to a HierarchicalDataSource instead of an object with the HierarchicalDataSource configuration. The children options are used to initialize the node children dataSource when the children are loaded and so only the options instead of an instance should be set as demonstrated in the demos and the documentation.


Regards,
Daniel
Telerik