question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tree view: add capability for an "expand/collapse all" toggle

See original GitHub issue

Describe the issue. What is the expected and unexpected behavior?

Currently, the expanded state of a subtree is handled internally in a useState hook in TreeViewListItem.tsx. We are trying to add a toggle button to expand/collapse everything in the tree, but we can’t control that state from outside the component.

I propose a new prop allExpanded that is passed down the tree similarly to defaultAllExpanded, and if it is defined its value is used instead of the internal expanded state. a null/undefined value would allow the internal state to work, a true value would force the entire tree to expand, and a false value could force the entire tree to collapse. When the user clicks one of the toggles in the tree itself, it could be set to null again so that the internal state kicks back in.

Maybe instead of an external prop, that allExpanded behavior could be handled internally at the top level, and a button could be shown to the left of the search bar (or in place of it if search is disabled) if a showExpandAll boolean is passed. Maybe that would be better, to keep it consistent with the existing internal state.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

Observable in the workspace examples.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Enhancement / nice to have.

What is your product and what release version are you targeting?

https://github.com/konveyor/virt-ui (Red Hat Migration Toolkit for Virtualization), no particular release target.

cc @kmcfaul

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
tlabajcommented, Dec 15, 2020

I think even if we allow the flexibility of adding whatever in the header, we still need a prop for the expand/collapse all state so the consumer can control that via whatever the put in the header.

1reaction
mturleycommented, Sep 25, 2020

Makes sense. The scope of this particular issue should probably be limited to the ability to pass that expanded/collapsed state in via props, since that would allow the consumer to add their own expand/collapse control anywhere they need to, including in whatever general purpose toolbar comes later.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How Do I Create Expand All and Collapse All Links Outside of ...
The jQuery Treeview Plugin adds Collapse All, Expand All and Toggle All links to the "treeviewcontrol" div when the control property is ...
Read more >
React TreeView Component & Expanding All Items - Telerik
To enable the collapse-all mode for its items, set the expanded field of each TreeView node to a falsy value. You can further...
Read more >
Add "Expand All" Button to epic tree view (#197485) - GitLab
A allows the user to have all expand/collapse controls along the left side. B groups all header actions together and could be visually...
Read more >
Expand and Collapse TreeViewItem on single click - MSDN
My trouble is not expanding or collapsing all the nodes at the same time. What I want to do is to toggle IsExpanded...
Read more >
"Collapse All" for Folder tree view - Explorer++
This can create an extremely tall (and wide) tree that is dififcult to navigate. I often wish for a "Collapse All" shortcut key...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found