Load treeview children on demand/condition

[Daochuen]

Hello,

Would someone be able to offer the solution on how to get certain node's data which is dynamic loaded (load on demand)?

The case is that in my MVC project the top level node have already be loaded on TreeView . I need load second level to fourth level node based on every level's condition (on one button click). My problem is I cannot get second level's detail data (after the nodes appended to top level ) which third level depend on. When I do the debug the count of second level nodes showed correctly, but not detail data anywhere. Do you have some suggestions? Thanks in advance!

[Joana]

Hello,

Based on the data and the information you have about the node that needs to be expanded on a button click, you could

1) Use the expandPath methods of the TreeView:

https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/methods/expandpath - This method would be the best approach if you are aware of the ids of all node's parents or you could easily find its dataItem parents based on certain criteria.

2) Consequentially expand only the items and locate the node:

https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/nodes/node-async-expand

I hope this will help you achieve your scenario.

Regards,
Joana
Progress Telerik

[Daochuen]

Thanks for respond.

After further analysis I found loaded children items be doubled.  For example, one node have two children but items showed 4. Items[0] and items[1] contain some none- useful data which I investigated before. Items[3] and items[4] did include real  detail data. I don't know why data showed in that way but I get the data back by reading the last two elements.

[Joana]

Hi,

I cannot think of any reason to have duplicated data items in the TreeView. Are you sure that the hierarchy of the items is correct?

Could you please share a runnable sample where we could examine the issue in order to give you more useful information? 

Regards,
Joana
Progress Telerik

[Daochuen]

Hi Joana, 

Somehow I don't know why the extra dummy nodes occurred during the run-time. After I had modified the node loading function, the extra nodes have gone but my initial problem appears again - I can't get the node id after nodes were loaded in one process, resulting in deeper level nodes not be loaded.

I created two files to reproduce the issue:
 
1. TreeViewTestController, server side code which includes sample class Employee to made tree nodes
2. Index.cshtml file with JavaScript on the bottom.

Steps to reproduce:
After index shown top node with two direct children are loaded.
1. select top Node "CEO" if it is not highlighted( see first image on attached doc file)
2. put 7 (Fifth level note  id) in the text box 
3. click button "Load this child"

Program should load Level3, level4 and level5 in turn, eventually hit level 5 node with id="7" 

But the program stops at level two (see third image on attached doc file) since id field is empty for every loaded field. But if I uncomment statement alert("After this message you could see loaded nodes and nodes data") within function doLoadChildredNode(), all the nodes are loaded as expected ( see second image on attached doc file). 

My question is that how do I load all the level nodes without alert() statement ?

Really appreciate your time and help. This issue bother me a lot.

[Joana]

Hello,

Thanks for providing your files.

I'll go through them and let you know my findings.

Regards,
Joana
Progress Telerik

[Joana]

Hello Zhihong,

The matter of issue is that the loading of child nodes is asynchronous operation and you have to wait for it to complete before executing further logic. 

Having an alert statement pauses the execution, and thus the logic for expanding next levels work. So, I would suggest the implementation of asynchronous loading and expanding of the children as shown in the below article:

https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/nodes/node-async-expand


Regards,
Joana
Progress Telerik

[Daochuen]

Thank you so much Joana,  After I changed my code based on your suggestion I got the expected results back!