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

kendo treeview with lazy loading

5 Answers 437 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
james
Top achievements
Rank 1
james asked on 31 Aug 2017, 03:26 PM

Hi, Telerik Team

      I am utilizing kendo treeview to show organizational structure of sales forces, and this tree is made of uncountable layers (hundreds or thousands,  and even ten thousand nodes)  Therefore, I hope that this treeview can only display the first layers, and by expanding tree nodes, child nodes will emerge from data transferred via web services.  Is that possible for me to capitalize on functions of kendo treeview for the sake of achieving the feature, lazy loading mentioned.

     Another question is that if overwhelming data, such as ten thousand nodes, is loaded in kendo treeview,  will there be a performance issue encountered?

     Could you please offer me some suggestions?

 

Thanks & Best Regards

James Shen

5 Answers, 1 is accepted

Sort by
0
james
Top achievements
Rank 1
answered on 31 Aug 2017, 03:31 PM
This is telerik kendo treeview for asp.net MVC.
0
Dimitar
Telerik team
answered on 04 Sep 2017, 11:04 AM
Hello James,

On the following Demo you can find a simple implementation of the TreeView which uses lazy loading and fetches the data on node expand. You can perform some tests with this configuration in order to determine if this can satisfy your application requirements.

In general, when working with a complex multi-level HierarchicalDataSource, the performance is expected to decrease with large amount of data, as this is a resource heavy operation, which is dependent on the browser JavaScript engine (rendering). 

In case the TreeView is not as efficient as required (with the used amount of data), I can suggest to try the Kendo UI Grid widget, which can be configured to also display hierarchical data. You can observe this behavior on the following Grid Hierarchy Demo. Additionally, you will be able to use virtualization or paging to reduce load time significantly.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
james
Top achievements
Rank 1
answered on 04 Sep 2017, 03:47 PM

Hi, Dimitar,

      Thanks for your reply, and however, according to the demo you mentioned, kendo treeview will read all data records from employee method.  There has been a question how to configure the settings for the sake of transferring employee ids of persons who have subordinates to employee method.  If this feature has not been supported, this is not real lazy loading due to the fact overwhelming data has been retrieved by triggering web api, employee method.

 

Thanks & Best Regards

James Shen

0
james
Top achievements
Rank 1
answered on 05 Sep 2017, 03:39 AM

Hi, Dimitar,

      I can see kendo treeview which will post the url 'http://demos.telerik.com/aspnet-mvc/TreeView/Employees?id=2' by utilizing tools, and there still has been a question if I need to call the web api with multi-parameters, such as ids, date and etc, how these values will be configured in the treeview.  Could you please offer some suggestions?

 

Thanks & Best Regards

James Shen

0
Dimitar
Telerik team
answered on 07 Sep 2017, 08:37 AM
Hi James,

I am attaching a sample ASP.NET MVC project, where you can find a working example of the TreeView widget (configured with LoadOnDemand(true) and remote DataSource).

In the above example there is a single service end-point(homogenous) that is used to retrieve the data for the TreeView. With LoadOnDemand, only the root elements data is being retrieved and the id parameter is being automatically sent to the remote service when expanding a node (.../Employees?id=2). You can refer to the HierachicalViewModel and the Read_TreeViewData() method in the HomeController, where the described beahvior can be observed.

In addition to the above, you can find additional information and examples in the Hierarchical DataSource Overview.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
james
Top achievements
Rank 1
Answers by
james
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or