How to limit the depth of a TreeView?

[Grant]

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

[Stefan]

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