Can I have a fully loaded hierarchical datasource with a lazy loaded treeview (dom-wise) on top of it?

[Ryan]

Kendo UI version 2014.2.903

I'm having some Hierarchical data source / tree view headaches, and wondering if I'm just doing this wrong.

Summary: we want a single local fully populated hierarchical data source as our model, so its easy to visit any node in the hierarchy. And, we want a lazy loaded treeview (dom wise, not data wize) on top of it.


I'm attempting to display our data in a treeview, while having a single datasource/model behind it. All data is already local, so I would like to access the model assuming it's already completely loaded. Of course, the treeview should operate lazily, not creating dom elements until the user expands a node. So, we want the datasource fully loaded, but the treeview dom elements lazy. From what I see, this is not possible.

Here is what I see... Maybe I'm doing something wrong...

Our data in this example is about 6000 items structured hierarchically in an array of objects, each of which may have a Children array field.

Manually populating a hierarchical data source with add() / append() takes about 4 extra seconds. Apparently due to wrapping all the objects? This is too slow for our use case.

Also tried using code just like kendo.observableHierarchy which internally creates a fully loaded hierarchical datasource But again, same extra 4 seconds.

Question: is it really slow due to wrapping? Or due to events firing? Is there a way to batch the updates and make it fast? Again, this is all running against local data.

Let's say we were OK with this extra time. I discovered what I think is a bug in the treeview. On expanding a single node, when it encounters such a fully-loaded datasource structure, the treeview creates its dom elements all the way down the structure, NOT just the level that was expanded. This is obviously a non-starter since it very slow to create all those dom elements.

So, instead we're forced to use the hierarchical data source in its natural lazy mode: children are not copied/wrapped from the input data array until you load the Node, which happens for example when a tree item gets expanded.

This lazy loading causes annoyance any time you need to read/write your model:
For example, you want to find an item in the data source (your model) by ID, in order to set some fields on it, so you recursively visit the items starting from the top. When a level is already loaded, you need to access Children (our own field in the model). But when the level is not loaded, you need to access the hierarchical data source's internal copy of the data at children.options.data (this is the data that will eventually be copied/wrapped and put under Children once the level is loaded).

And, checking whether a level is loaded is also kludgy:
The hasChildren seems accurate, so you know if there are children in general. But, the loaded() function seems to be true in some cases, when in fact nothing has been wrapped/copied under Children yet.

So, you need to check node.hasChildren && Children.length. If that fails, then you know you need to access the children.options.data. This obviously makes dealing with the model a pain.

I'm hoping that I'm just doing this wrong and someone can help me understand the right way to do this.

Summary: we want a single local fully populated data source as our model, so its easy to visit any node in the hierarchy. And, we want a lazy loaded treeview (dom wise, not data wize) on top of it.

Thanks,
Ryan

[Alex Gyoshev]

Hello Ryan,

This functionality is not supported by the Kendo UI TreeView at this time. All nodes that are loaded in the DataSource are rendered in the TreeView. If you store the items separately from the DataSource, you can use the approach shown here to load them progressively into the DataSource. It also allows some items to be fetched from the server, if not available in the loaded data.

Regards,
Alex Gyoshev
Telerik