Material-ui: [TreeView] Expand all nodes

Created on 18 Nov 2019  路  9Comments  路  Source: mui-org/material-ui

I have a treeview with a couple of hundred nodes. I have added a textfield before the treview that the user can use to search/filter the tree. As they type I add/remove classes from the TreeItems to hide and show TreeItems. It works fine BUT I want all of the tree view nodes to be expanded once they enter something into the search/filter textfield.

I have tried feeding the "defaultExpanded" prop a new list that has all of the nodes in it but it doesn't seem to cause the nodes to expand as I had expected. The defaultExpanded prop only seems to be respected when the tree initially draws.

I am currently working around this by looking for collapsed nodes and firing click events for them to force them to open but that is causing issues (the textfield looses focus and the keyboard hides and the treeview jumps around).

Is there a recommended way to dynamically expand all of the nodes in a TreeView?

TreeView docs

Most helpful comment

@joshwooding A right, great idea. We could have 1 controlled demo that shows all the controllable props 馃憤?

All 9 comments

@escher4096 You can use the expanded prop to control the state.

I had already tried using the expanded property and it does not seem to be respected at all. I was playing in the Material UI sandbox for the TreeView and the expanded property seems to work fine there.

Any chance there is an issue with this property in the 4.0.0-alpha.27 version?

@escher4096 The controlled API for TreeView was introduced in @material-ui/[email protected]

@joshwooding Do you have example sandbox? I'm having the same issue and expanded prop on child nor parent or treeView seem to work. Can't find any documentation about expanded prop. I'm using @material-ui/[email protected]

@joshwooding Okay, I managed to get it working, had installed @material-ui/[email protected], but I installed it a while ago. Updated it with npm and now it's working

I think we should add a demo cc @oliviertassinari

@jurisjansons Where this demo useful https://material-ui.com/components/tree-view/#controlled?
@joshwooding What do you have in mind for the demo?

@oliviertassinari A expand all demo with a button you can press and potentially adding a select all button

@joshwooding A right, great idea. We could have 1 controlled demo that shows all the controllable props 馃憤?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

reflog picture reflog  路  3Comments

rbozan picture rbozan  路  3Comments

TimoRuetten picture TimoRuetten  路  3Comments

activatedgeek picture activatedgeek  路  3Comments

anthony-dandrea picture anthony-dandrea  路  3Comments