TreeView with remote hierarchical datasource

[Richard]

I have this datasource

var HDS = new kendo.data.HierarchicalDataSource({

    error: raiseAjaxErrorWindow,

    transport: {

        read: {

            url: HDS_URL,

            dataType: "jsonp"

        }

    },

    schema: {

        model: {

            id: "id",

            hasChildren: "hasChildren",

            data: "data"

        }

    }

});


and this tree view config

    $("#treeview").kendoTreeView({
        dataSource: HDS,
        dataTextField: "text",
        dragAndDrop: false,
        select: onSelect,
        expand: onExpand,
        collapse: onCollapse
    });

The HDS url delivers a callback that looks like

jQuery18209300398211926222_1361181052330(
[{"id":"2a1bfc85-06d5-4702-bc92-d659fcae9d39",
"text":"Group 1",
"hasChildren":"1",
"data":{"type":"1","depth":2,"color":"red","flavor":"up"}
}])

call this the foobar node.

How do I add extra rendering to the tree node to display the items in the data field?

When a node having children is opened, the HDS url is automatically ajaxed with data id=<id of node>.

Is there a way to configure the transport.read so that when it is to be opened, it will use some or all of the the extra data of the foobar node when ajaxing the url. ?

For instance, I would like the HDS to be called with the additional data  depth=2&type=1

If so, where would I put this little magic ?

Thanks,
Richard

[Richard]

With regards to 
"How do I add extra rendering to the tree node to display the items in the data field?"

I find out that I need to use the template property in the treeview configuration to surface "item" properties which will match those as specified by the the model setting.

ds = kendo.data.HierarchicalDataSource({
...
schema: { model: { ... }}
...
})

$('#treeview').kendoTreeView ({
...
template: " #= item.id # has color #= item.data.color # and flavor #= item.data.flavor #
...
})

Regarding the query generated by the expand action on a node, I don't see a way hook in additional data based on the node -- In the deeps of data.js I see Node.load performs the query with what appears to be options created for and by itself.

[Daniel]

Hello Richard,

Currently only the ID will be added to the options for the request data. In order to pass the other parameters I can suggest to use the treeview expand event to save the item and then use it in the data function e.g.

var expandedItem;
var HDS = new kendo.data.HierarchicalDataSource({
    error: raiseAjaxErrorWindow,
    transport: {
        read: {
            url: HDS_URL,
            dataType: "jsonp",
            data: function(){
                if(expandedItem){
                    return {
                        text: expandedItem.text
                    }
                }
            }
        }
    },
    schema: {
        model: {
            id: "id",
            hasChildren: "hasChildren",
            data: "data"
        }
    }
});
function onExpand(e){
    expandedItem = this.dataItem(e.node);
}

Regards,
Daniel
the Telerik team

[mudi]

I have a simmilar challenge. I have multiple treeviews on a page rendered by an $scope array in angular js. 
In each TreeView I want the first level to be expanded automatically. Which I can do by setting expanded: true on the top level treeview. While having LoadOnDemand: true.

The child datasource looks like below. This works well when I expand I can set the $scope.expandedItem and the var data is set correctly. But on rendering the treeview, it tries to expand the nodes but at that time onExpand method doesn't seem to get fired and $scope.expandedItem is null

 

Also I have a contextMenu attached to some of the nodes. The context Menus doesn't work when the child nodes are populated. Previously the entire treeview was loaded at once and contextmenus worked.

So, how do I pass multiple parameters to childdatasource when using auto expand option. And then is there a way to get my context menu working after the childNodes are populated. If there a way to know when all the childNoded are populated then I can call a method.

return {
            schema: {
                model: {
                    hasChildren: "hasChildren",
                }
            },
            transport: {
                read: {
                    url: $scope.childHierarchyUrl,
                    data: function (options) {
                        var data = [];
                        data.Property1= $scope.expandedItem.Property1;
                        data.Property2= $scope.expandedItem.Property2;
                        data.Property3= $scope.expandedItem.Property3;
                        return data;
                    },
                    type: "POST",
                    dataType:"json"
                }
            }
        };

 

 

 

 

 

[Veselin Tsvetanov]

Hi Mudi,

Concerning the additional data sent on the initial expand of TreeView items, the expand event will not be fired in such a case. The expand will fire only upon user interaction. Therefore, I would suggest you to get the actual dataItem (and all its properties) in the read.data function directly:

data: function (options) {
  var id = options.EmployeeId;
  var dataSource = $('#treeview').getKendoTreeView().dataSource;
  var dataItem = dataSource.get(id);
},

Here is a small sample demonstrating the above suggestion:

https://dojo.telerik.com/ayewejAY

As per the ContextMenu issue, I suppose, you are attaching it to the items in the TreeView. As those will be loaded dynamically, I would recommend you to attach the Menu to the TreeView wrapper element and use its filter configuration to specify the items in the TreeView as inner targets.

Regards,
Veselin Tsvetanov
Progress Telerik

[Summit]

Yes it does for me. I can by setting the expanded  = true have the top level expand automatically at the time of rendering the treeview. 

[Veselin Tsvetanov]

Hello,

May I ask you to explain a bit in detail what do you mean by "Yes it does for me."? What is the issue faced in the case in question? Does the suggested approach help you resolve it?

Regards,
Veselin Tsvetanov
Progress Telerik