kendo treeview with lazy loading

6 posts, 0 answers
  1. james
    james avatar
    9 posts
    Member since:
    Nov 2008

    Posted 31 Aug Link to this post

    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

  2. james
    james avatar
    9 posts
    Member since:
    Nov 2008

    Posted 31 Aug Link to this post

    This is telerik kendo treeview for asp.net MVC.
  3. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 04 Sep Link to this post

    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.
  4. james
    james avatar
    9 posts
    Member since:
    Nov 2008

    Posted 04 Sep in reply to Dimitar Link to this post

    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

  5. james
    james avatar
    9 posts
    Member since:
    Nov 2008

    Posted 04 Sep in reply to Dimitar Link to this post

    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

  6. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 07 Sep Link to this post

    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.
Back to Top