Load nodes on-demand when "children" has been set to field

Thread is closed for posting
12 posts, 0 answers
  1. Aaron
    Aaron avatar
    3 posts
    Member since:
    Feb 2013

    Posted 02 Mar 2013 Link to this post

    What I want to accomplish: have a "pre-built" hierarchy loaded on the initial load of the data, but still allow the user to expand the non-expanded nodes and load that data remotely.  I need to pre-load a portion of the hierarchy data because I need to have a value selected somewhere in the tree on the first load and that data needs to be there.

    Remote loading of data works fine, and filling in the default data works fine....but not at the same time.  If I have the "children" property set to a field in my JSON data, the nodes are no longer wired to fetch new nodes on-demand.  How can I enable that behavior?

    I have the following data source:
    var homogeneous = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: 'http://localhost:500/api/users/getnode?selectedNodeId=31627',
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "nodeId",
                hasChildren: function (item) {
                    return item.hasChildNodes;
                },
                children: "nodes"
            }
        }
    });
    Any ideas? I want to preload SOME data, but still load the rest remotely on demand for the nodes that don't have any children,
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 Mar 2013 Link to this post

    Hello Aaron,

    I am afraid this functionality is not supported out of the box yet. As a work-around, you can specify the transport.read as a function and return the data from a local array or from the remote service, depending on whether it has been loaded.

    Regards,
    Alex Gyoshev
    the Telerik team
    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. Patrick Maurer
    Patrick Maurer avatar
    40 posts
    Member since:
    Mar 2006

    Posted 27 Jan 2015 Link to this post

    Almost 2 years have passed now. is there a good way to do this now or do i still have to use a workaround for what seems to be a common use case?

    Regards
    Patrick
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 27 Jan 2015 Link to this post

    Hello Patrick,

    This is not supported by the widget yet, because of the nature of the HierarchicalDataSource. See this help topic on how to achieve hybrid loading of 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!
     
  6. Patrick Maurer
    Patrick Maurer avatar
    40 posts
    Member since:
    Mar 2006

    Posted 28 Jan 2015 in reply to Alex Gyoshev Link to this post

    Hello Alex,

    Thanks for attaching a sample. Too bad it's not supported out of the box yet. I hope it's at least up there somewhere on your feature idea collections because i do think that it is rather common to have a treeview act like that.

    Anyway - thanks again.

    Patrick
  7. Patrick Maurer
    Patrick Maurer avatar
    40 posts
    Member since:
    Mar 2006

    Posted 29 Jan 2015 Link to this post

    Hello Alex,

    Could it be that the MVC UI is lacking a parameter to specify a javascript function to be called? I can't seem to find it in order to implement the sample.

    Regards
    Patrick
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 30 Jan 2015 Link to this post

    Hello Patrick,

    This is considered a custom transport, so you can achieve it in this way:

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DataSource(dataSource => dataSource
            .Custom().Transport(t => t.Read("readHandler"))
        )
    )

    <script>
        function readHandler(options) {
        }
    </script>

     

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Patrick Maurer
    Patrick Maurer avatar
    40 posts
    Member since:
    Mar 2006

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

    Hello Alex,

    That's exactely what i was looking for. Thank you!

    It would be worth mentioning in the MVC demos as a sub case.

    Regards
    Patrick
  10. Jason
    Jason avatar
    4 posts
    Member since:
    Mar 2015

    Posted 23 Apr 2015 Link to this post

    I just want to throw in a vote for this functionality. I've wasted quite a bit of time (admittedly as a Kendo newbie) figuring out that you can't have pre-loading of some levels and lazy loading of the remainder as Aaron described.  I had no idea setting the children property for the model would affect the type of the transport for loaded nodes until I had a dig in the debugger, this was really unexpected!
  11. Krishna
    Krishna avatar
    6 posts
    Member since:
    Apr 2015

    Posted 14 Aug 2015 Link to this post

    My children have a property name of "children" not "items". So i set it the following the following. Some reason it is not rendering tree. It renders when i have property name of "items". please help.

    $("#treeview").kendoTreeView({
    template: "<div id='#= item.id #'>#= item.text #</div>",
    dataSource: {
    transport: {
    read:  function (options) {
    options.success([vm.treeData]);
    }
    },
    schema: { model: { id: "id", children: "children" } }
    },
    select: vm.treeViewSelected,
    expand: vm.treeViewExpanded
    });
  12. Krishna
    Krishna avatar
    6 posts
    Member since:
    Apr 2015

    Posted 14 Aug 2015 Link to this post

    vm.treeData is my local variable with data.
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 18 Aug 2015 Link to this post

    Hello Krishna,

    The HierarchicalDataSource does not support this configuration, as noted in the documentation. Use another field name, or translate the fields on the client-side via the schema.parse method.

    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