LoadOnDemand on specific levels

7 posts, 1 answers
  1. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 28 Aug 2013 Link to this post

    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?
  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 30 Aug 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 02 Sep 2013 Link to this post

    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
  5. Mike
    Mike avatar
    17 posts
    Member since:
    Jul 2010

    Posted 06 Feb 2015 in reply to Alex Gyoshev Link to this post

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

  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 09 Feb 2015 Link to this post

    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!
     
  7. Mike
    Mike avatar
    17 posts
    Member since:
    Jul 2010

    Posted 09 Feb 2015 in reply to Alex Gyoshev Link to this post

    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.
     
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 10 Feb 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready