Programmatically expanding a TreeView in Patternfly 4

Support
#1

Hi,

I am constructing a TreeView in react and have the following so far:

Screenshot_20230127_162511
Screenshot_20230127_162511327Ă—587 15.9 KB

Everything seems to be coming together nicely, except I cannot work out how to programmatically expand the tree to the correct node when the tree is first displayed. So, for example, assuming the user has selected SampleCamel from another page and then displays this TreeView, at the moment, I can get the TreeView to select SampleCamel (it displays blue) but it does not expand. When I do expand manually, as shown, the selection is already blue. I considered the property allExpanded but that expands everything.

If it helps clarify, my code is here.

Can you advise please?

Thanks

phantomjinx

#2

Hi phantomjinx,

To set the TreeView with the hasSelectableNodes flag to correctly default with a folder expansion, you should add defaultExpanded: true to the TreeViewDataItem node (in this case “SampleCamel”) and also set the initial state of activeItems to the same TreeViewDataItem. Looking at your code, you may have to modify getTree, or add a helper function to clone+modify the tree data to add the defaultExpanded property.

Here is a codesandbox with one of our examples edited to have “Application 1” with a default open state. The initial state of activeItems is usually a copy of the whole TreeViewDataItem, but with the default compareItems property, it will only look at id so that is the only required field for simplicity (unless compareItems is passed in and customized).

If still have trouble, or have any additional questions, please let us know!

Thanks,
kmcfaul

#3

Hey kmcfaul,

Thanks so much for the quick and clear response. All sorted, and tree working as expected.

Cheers

phantomjinx

1 Like