This is a migrated thread and some comments may be shown as answers.

LoadOnDemand on specific levels

6 Answers 375 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Michiel
Top achievements
Rank 1
Michiel asked on 28 Aug 2013, 09:19 PM
We are trying to port a Telerik MVC tree to a Kendo UI treeview. Most of the things works great using the hierarchical datasource, but there is one thing I'm missing in the new Kendo UI controls; the loadondemand option on the node itself.

In the old MVC controls I could indicate on each node if it had children AND if it needed a load on demand. I needed this because my tree is based on some filters and settings, so the layering can differ each time. Some of the database queries I can do more easily by retrieving two or three levels at the same time.

So for example I can load the following construct:


 - B
 - - C

With the MVC Control for both A, B and C I could indicate that they have children, but only C need to invoke another request, so it had the loadondemand value on true.

With the Kendo UI treeview, I'm unable to specify per node the loadondemand option. So I can return level A but then I need to indicate they have children (otherwise the expand icon is not shown) and the child items are not rendered. If you click the expand arrow, it will however not use the items collections, but will invoke a new request to load the next level. Not needed because that level is already loaded. In the MVC controls I could indicate this, but in Kendo UI there is no option for this. I tried to set the children property in the schema, but I'm unable to set it as a function (for example; if item has items, use it, otherwise use the datasource itself to load new level).

So is it somehow possible to use both a node with child items and a node that needs on demand loading?

6 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 30 Aug 2013, 02:41 PM
Hello Michael,

We are aware of this limitation, and are considering some options for extending the HierarchicalDataSource functionality in the future. At this time, you can work-around the current behavior by using a custom DataSource transport, like shown in this jsBin sample. It shows how to load a hierarchy in the TreeView and conditionally use AJAX requests to load new data.

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michiel
Top achievements
Rank 1
answered on 02 Sep 2013, 11:40 AM
Hi,

Thanks for the suggestion. I now splitted it already in level 1 calls, but we can optimize with this example.

Would be good to have it back like it was in the MVC controls; a property on the node itself to indicate if it needs a remote call.

regards Michiel
0
Mike
Top achievements
Rank 1
answered on 06 Feb 2015, 07:59 PM
Have any changes been made to accommodate this limitation, or is the work-around still necessary?

If I still need to use the work-around, please help. I can't get it to work. The first two levels of my tree will be populated by the first datasource read. All additional levels need to be called on demand. The initial datasource read is working and my tree shows two levels. However, when I expand the second level the dataSource read isn't being called. All data items have the HasItems property set to true. 

   
function get(data, id) {
    if (!id) {
        return null;
    } else {
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                return data[i].items;
            } else if (data[i].items) {
                var result = get(data[i].items, id);
                if (result) return result;
            }
        }
    }
}
 
var reportsData = new kendo.data.HierarchicalDataSource({
    transport:{
        read: function (options) {
            var id = options.data.id;
            var data = get(reportsData.data(), id);
 
            if (data) {
                options.success(data);
            } else {
                $.ajax({
                    url: "/Reports/GetReportList",
                    dataType: "json",
                    cache: false,
                    data: { id: options.data.id },
                    success: function (result) {
                        options.success(result);
                    }
                });
            }
        }
    },
    schema: {
        model: {
            id: "Id",
            hasChildren: "HasItems",
            children: "Items"
        }
    }
});
$('#reports-treeview').kendoTreeView({
    template: kendo.template($("#treeview-template").html()),       
    dataSource: reportsData
});

0
Alex Gyoshev
Telerik team
answered on 09 Feb 2015, 09:41 AM

Hello Mike,

Code is still necessary in order to achieve this scenario. We have documented the approach here -- notice that it does not require such a schema definition as the one in the code you posted. If you need help with implementing it in your application, please provide a sample that shows the problem.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 09 Feb 2015, 06:19 PM
I'm not trying to have mixed local and remote data. I'm trying to have a remote data read populate multiple levels of data. 

Initial remote read: 

Item 1
     -Item 1 Child 1
     -Item 1 Child 2
Item 2
Item 3

Then when any of the items are expanded the children will be obtained from a remote read. Except Item 1 who's direct children were included in the initial read. 

My schema is as shown because without specifying the "children" member I wasn't seeing the Item 1 children, even though they were retrieved and the data was in the DataSource.
 
0
Alex Gyoshev
Telerik team
answered on 10 Feb 2015, 09:28 AM

Hello Mike,

This scenario, too, is considered mixing local and remote data, because the items are being loaded in multiple stages at a time. This is not supported out of the box and needs a custom transport -- you can decide how your data is fetched and cached and provide it to the TreeView when it requests it.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Michiel
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Michiel
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Share this question
or