How to limit the depth of a TreeView?

1 Answer 8 Views
TreeView
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 31 Aug 2021, 10:48 AM

Hi,

As my question says, I would like to know, how can I limit the depth that a TreeView expands to?

Consider the data object below, that lists geo-locations, there is only 3 levels, but i cannot have a treeview display 4,000 cities when the user expands a province. Im displaying that data in a grid elsewhere.

My question is as follows: I cannot separate the cities into a separate list due to other functionality, but the TreeView will try to render any node 'items'as children, How can I instruct the TreeView to limit the depth to 1 layer, ie, I sened it data and of the objects it only looks at the first set of objects' items.

const data = [
  { 
    name: 'Country' ,
    items: [
      { 
        name: 'Province-1',
        items: [
          ... 4,000 cities names
        ]
      },
      { 
        name: 'Province-2',
        items: [
          ... 5,000 cities names
        ]
      },
      ...
    ]
  }
]

Thanks,
Grant

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 02 Sep 2021, 04:44 AM

Hello, Grant,

This can be done during the onExpandChange event of the TreeView. The developer can check which is the item that is about to be expanded (including its children). Then based on that to not execute the logic that expands the item and send that information to a Grid or another component.

This is a pseudo-code:

handleExpnadChange = (e) => {
 if(e.item.items.length > 1000) // or check based on e.itemHierarchicalIndex{
 sendData(e.item.items)
 } else {
  expandTheItem()
 }
}

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Stefan
Telerik team
Share this question
or