Hierarchical structure bound to complex dataset

2 posts, 1 answers
  1. Rhett Davies
    Rhett Davies avatar
    7 posts
    Member since:
    Nov 2018

    Posted 30 Jan Link to this post

    Hey guys,

    I really hope this makes sense, i want to give my users a quick way to view their organizations structure and additionally add items via a context menu in the tree view.

    I have attached an image which shows what i want to achieve, i have manually built the attached structure but i need to achieve the same by binding to remote data and additionally implement lazy loading (If possible).

    • At the root level i only have companies (companies do not have sub companies).
    • When expanding on the company, you will see a list of branches (Branches can have an infinite number of sub branches).
    • When expanding on the Branch, you will always see a department list and sub branches (departments do not have sub departments).
    • When expanding on the sub branch, you will always see a department list and possibly more sub branches.

    How do i bind the treeview to these 3 different lists?

    I would also like to create a context menu for the treelist items.

    • When right clicking on the Company Node, i want to show a context menu to Add, Edit or Deactive Company as well as Add Branch.
    • When right clicking on a Branch i want to show a context menu the Add Sub Branch, Edit or Deactive Current Branch.
    • When right clicking on a Department i want to show a context menu to Add,Edit or deactivate the department.

    The problem with the context menu is how do you know what type of node you are clicking on? (Company, Branch or Department)


  2. Answer
    Dimitar avatar
    437 posts

    Posted 01 Feb Link to this post


    TreeView can be bound to HierarchicalDataSouce. The following HierarchicalDataSource article shows how to "Bind HierarchicalDataSource to remote data with multiple service end-points" to create multi-level datasource fetching data from different endpoints (scroll down a little in the article as the link does not point to this part directly). The snippet at the end of the same article shows how TreeView may be bound to such a datasouce. I created a Dojo to show the TreeView binding in action. As for lazy loading, when TreeView is bound to HierarchicalDataSouce, its loadOnDemand property is true by default.

    The following forum post shows a snippet how to open different ContextMenu for different TreeView items. It will help you to achieve the desired functionality.

    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top