expand all, collapse all

[madhums]

Is there a function which I can use to expand and collapse all the tree items?

[iamravisingh]

@lukasbach do we have a function or we have to create a custom component to handle this?

[lukasbach]

Hi @madhums and @iamravisingh, there currently is no predefined logic for that, but you should be able to do that on your own with a imperative ref on the environment.

[iamravisingh]

@lukasbach I tried doing that with the ref but it's not working as expected it will be very helpful if you share some snippet/example for the same.
Thanks

[madhums]

This also relates a bit to how to expand items whose search matches. Initially when you search, a child node might be collapsed. But now since the search matches, it should open. Any idea how to incorporate this along side expand/collapse all?

[iamravisingh]

@lukasbach I am halfway through achieving this. However, on a single click the action is not happening as we have to pass a single tree to expand and collapse, is there any way we can pass the entire expanded/collapse tree to achieve this?

I have attached a video on the below logic. It would be great if you guide me to achieve this
tree_expandcollapse.webm

cc: @dlech

export const getFocus = (envRef, treeId) => envRef.current.viewState[treeId].focusedItem || '';

export const toggleTree = (environmentRef) => {
  const treeId = TreeResource.fTree.id
  return getFocus(environmentRef, treeId)
}

const handleCollapseAll = () => {
  const viewState = environmentRef.current.viewState;
  const currentExpandedItems = viewState[TreeResource.fTree.id].expandedItems;
  const focus = toggleTree(environmentRef);
  treeRef.current.collapseItem(currentExpandedItems.pop());
};

const handleExpandAll = () => {
  const viewState = environmentRef.current.viewState;
  const focus = toggleTree(environmentRef);
  treeRef.current.expandItem(focus);
};

[madhums]

One option is to implement a ControlledTreeEnvironment component and set expandedItems as described in the documentation

But one obstacle for this is, you loose overriding dataProvider.onChangeItemChildren method which is used by the UncontrolledTreeEnvironment - which helps in expanding a node without a child when node(s) are dropped on them.

[lukasbach]

I looked into this and wanted to do a demo for how it can be implemented, but found out that just adding it as feature of the library was easier 😅 You can use the methods expandAll() and collapseAll() on a tree ref starting from react-complex-tree 1.1.10. You can see a demo here: https://rct.lukasbach.com/storybook/?path=/story/core-react-refs--expand-or-collapse-all

[madhums]

Thank you for the quick response and release Lukas! It seems like it does not expand the items recursively. expandAll to me would be expanding the entire tree, all the children. I made a sandbox here https://codesandbox.io/s/react-complex-tree-playground-forked-c9y7dp?file=/src/App.tsx

When you click on expandAll button the first time, first layer of children are expanded and then when you click on it again, the next child layer is expanded. My expectation is that all of them must be expanded at once.

[iamravisingh]

@lukasbach Thanks for the quick response and release. However, I agree with @madhums that expand and collapseAll should trigger the entire tree with a single click.

[lukasbach]

Ah my bad, I did not see that you added additional items in your demo, for which my implementation failed.. It took me a while to get it working even for delayed data sources, but that should now also be working for that too. I hope I did not miss anything else, let me know if I did though. Please try again in version 1.1.11 if the issue is resolved there.

[madhums]

Great! Thank you, this works!

[madhums]

Note: on big trees, there's some performance issues. I am rendering a tree of 1800 items and it gets very slow - takes about 30s to load the whole tree. I guess this is where #125 could help.