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

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

11 Answers 248 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Aaron
Top achievements
Rank 1
Aaron asked on 02 Mar 2013, 03:01 PM
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,

11 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 06 Mar 2013, 02:11 PM
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!
0
Patrick Maurer
Top achievements
Rank 1
answered on 27 Jan 2015, 01:34 PM
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
0
Alex Gyoshev
Telerik team
answered on 27 Jan 2015, 02:30 PM

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!
 
0
Patrick Maurer
Top achievements
Rank 1
answered on 28 Jan 2015, 04:09 PM
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
0
Patrick Maurer
Top achievements
Rank 1
answered on 29 Jan 2015, 01:05 PM
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
0
Alex Gyoshev
Telerik team
answered on 30 Jan 2015, 08:57 AM

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!
 
0
Patrick Maurer
Top achievements
Rank 1
answered on 02 Feb 2015, 02:14 PM
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
0
Jason
Top achievements
Rank 1
answered on 23 Apr 2015, 08:02 AM
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!
0
Krishna
Top achievements
Rank 1
answered on 14 Aug 2015, 07:37 PM
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
});
0
Krishna
Top achievements
Rank 1
answered on 14 Aug 2015, 08:05 PM
vm.treeData is my local variable with data.
0
Alex Gyoshev
Telerik team
answered on 18 Aug 2015, 06:11 AM

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!
 
Tags
TreeView
Asked by
Aaron
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Patrick Maurer
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Krishna
Top achievements
Rank 1
Share this question
or