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

[Aaron]

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,

[Alex Gyoshev]

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

[Patrick Maurer]

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

[Alex Gyoshev]

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

 

 

[Patrick Maurer]

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

[Patrick Maurer]

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

[Alex Gyoshev]

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

 

 

[Patrick Maurer]

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

[Jason]

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!

[Krishna]

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

[Krishna]

vm.treeData is my local variable with data.

[Alex Gyoshev]

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