TreeView-expand all nodes by default

[A]

Hi,

How to expand all nodes by default in treeview in react?

Can anyone give example how to achieve this?

 

 

[Filip]

Hi,

While the TreeView does not provide a built-in feature for expanding and collapsing all its items at once, the component supports such an implementation.

More information and an example can be found here:

https://www.telerik.com/kendo-react-ui/components/treeview/expansion/expanding-all/

https://stackblitz.com/edit/react-s8pj2a?file=app%2Fmain.jsx

The main idea is to set the expanded field of each TreeView node to true. To enable the collapse-all mode for its items, set the expanded field of each TreeView node to a falsy value. 

Regards,
Filip
Progress Telerik

[A]

Hi, why this example does not work for nested hierarchy?

For example:

const tree = [{
  text: 'Item1',
  items: [{
    text: 'Item1.1'
  }, {
    text: 'Item1.2',
    items:[{text:'Item a'}]
  }]
}, {
  text: 'Item2',
  items: [{
    text: 'Item2.1'
  }, {
    text: 'Item2.2'
  }]
}];

 

I tried on this example, but it does not show element 'a'.

 

https://www.telerik.com/kendo-react-ui/components/treeview/expansion/expanding-all/

 

[A]

Why does not work  for this example below?

I tried this example:

https://www.telerik.com/kendo-react-ui/components/treeview/expansion/expanding-all/

I does not work when children has its own children?

 

For example i add this :

 }, {

    text: 'Item1.2',

    items:[{text:'Item a'}]

  }]

const tree = [{

  text: 'Item1',

  items: [{

    text: 'Item1.1'

  }, {

    text: 'Item1.2',

    items:[{text:'Item a'}]

  }]

}, {

  text: 'Item2',

  items: [{

    text: 'Item2.1'

  }, {

    text: 'Item2.2'

  }]

}];

[Filip]

Hi, A A,

In order to make the expansion work for children as well, mapTree has to be used, because of the tree data structure.

I updated the example in order to showcase this approach:

https://stackblitz.com/edit/react-9hpd83-jbnh54?file=app/main.jsx

I hope this helps.