Not able to get datasource for collapsed tree node

[deepak]

Hi all,
  I am having treeview with checkboxes on kendo window, treeview datasource bound using ajax call and having some of it's nodes in checked state while loading the treeview, if tree is in collapsed state then while i am doing empTreeview.dataSource.view() then i am not able to get the collapsed node in collection.
I want the checked checkboxes in collapsed node as well.
Please reply.

[Dimiter Madjarov]

Hello,


The child nodes of the TreeView by default are fetched lazily i.e. they will be fetched only when the parent gets expanded. This behavior could be configured through the loadOnDemand option. If it is set to false all nodes will be fetched during initialization.

Regards,
Dimiter Madjarov
Telerik

[deepak]

Thanks for the reply loadOnDemand:false reoslved my issue. But started facing another  issue as while loading treeview browser goes into not responding state and sometime it is geeting crashed. How do i optimize loading time with one time load treeview datasource.(As i need all checked items in collapsed state as well so thats why i cant apply loadondemand:true in my case).
Please reply.

[Dimiter Madjarov]

Hi,

Another option in the current case is to use local data so it will be bound at once. This is demonstrated in the following demo.

Regards,
Dimiter Madjarov
Telerik

[Kyle]

I agree completely with deepak here.  I understand that to obtain data in children, we need to turn off loadOnDemand.  However, doing so, even with inline data, causes the browser to become unresponsive.

I created a simple JSBin to show what I'm doing in an attempt to reproduce the issue.  It seems to work very nicely in Chrome (currently version 31).  It does not work as nicely in FireFox 25.0.1 or IE10.  The JSBin DOES work a hair faster than the development I'm doing, but if you watch closely, you'll still see FF or IE temporarily "Not Respond."

Please tell me there's a way around this?  I need to be able to read the entire data source upon initial load.  Or is there an expanding/expanded (yes, both) event?  (I would like to show a progress icon when the user expands a node and turn it off when it's loaded.  I'd also like to see the children items immediately after expand.)

[Alex Gyoshev]

Hello Kyle,

Since the TreeView is bound to the datasource, reading all items into the datasource renders the complete tree. This is in turn slow, because the TreeView renders its items incrementally, rather than in one operation. We will revise if the latter can be improved upon, and I'll follow up in this thread next week.

Regards,
Alex Gyoshev
Telerik

[Alex Gyoshev]

Hello Kyle,

I have inspected the scenario that you posted in jsBin. You can make it significantly faster by not rendering empty items arrays -- about 3x improvement, depending on the count of empty nodes. My initial assumption did not stand correct, as large hierarchies can be created very fast, but having empty items arrays causes a lot of empty datasources to be created, which is a memory and computation intensive operation. Here is a modified jsBin that shows almost instant load.

Regards,
Alex Gyoshev
Telerik

[Kyle]

Alex,

Thank you!  This is wonderful information to have.  I have included it in my documentation so that our other developers don't fall into the same trap as me.

As always, I appreciate your hard work,
Kyle