Is there a way to have the tree component in an uncollapsed state?

General 🤓
1

Hello, as the title says, I’m using a tree component and I’d like it in an uncollapsed state. Is there a way to do this?

2

Hi @Sebastian_Kovacs,

I couldn’t find anything provided by UI Bakery natively, be it in the components settings nor as a trigger by code. Which means the only way to do it currently is to write custom code that does this for you.

So I’ve written a small snippet that does exactly that. The only issue is that it doesn’t expand all the branches immediately. That’s because when you click on a branch to expand it, all rows are added to the table again, even the ones that were already present/visible. So it will look like this
tree_expand

That is, at least, with the way I wrote this script, there probably is a better (and faster) way. But the best thing would be to make a feature request on UI Bakery’s feedback site for something like a toggle in the tree component’s settings if the start state is collapsed or expanded, or maybe to be able to programmatically toggle the branches with something like {{ui.tree.collapse}} and {{ui.tree.expand}}, but that’s up to the developer team to decide.

Anyway, here is the script to expand (and also collapse) a tree component. You could make it trigger on page/app load so it immediately expands when the page is loaded.

let pos = 0;

const observer = new MutationObserver( mutations => {
  let rows = mutations.flatMap(mutation => {
  	return mutation.addedNodes ? [...mutation.addedNodes] : [];
  });
  if (pos >= rows.length)
    observer.disconnect();
  while(pos < rows.length && !rows[pos].querySelector(".row-toggle-button")) {
  	pos++;
  }
  rows[pos++].click();
});

const config = { childList: true };

const target = document.querySelector(".nb-tree-grid");

observer.observe(target, config);

let children = [...document.querySelector(".nb-tree-grid").children];
if (children[0].classList.contains("nb-tree-grid-header-row"))
  children.shift();

children[pos++].click();

Note: In the way the script currently is written, it assumes there is only one tree component present on the page and the script needs to be adjusted if there are multiple, or else it will just do it with the first one present