This is a migrated thread and some comments may be shown as answers.
TreeView with remote hierarchical datasource
6 Answers 205 Views
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 18 Feb 2013, 10:13 AM
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

6 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 19 Feb 2013, 02:21 PM
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.
0
Daniel
Telerik team
answered on 20 Feb 2013, 10:20 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
mudi
Top achievements
Rank 1
answered on 15 May 2020, 09:27 AM

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"
                }
            }
        };

 

 

 

 

 

0
Veselin Tsvetanov
Telerik team
answered on 19 May 2020, 06:00 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Summit
Top achievements
Rank 1
answered on 19 May 2020, 06:45 AM
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. 
0
Veselin Tsvetanov
Telerik team
answered on 19 May 2020, 11:22 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Asked by
Richard
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Daniel
Telerik team
mudi
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Summit
Top achievements
Rank 1
Share this question
or