org-chart: chart.setExpanded method not working as expected

Describe the bug chart.setExpanded(<nodeid>) method is not working as expected

To Reproduce Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/web-platform-7zcadz?file=index.html
  2. Click on Collapse Button and you’ll see nothing happens.
  3. However, chart.collapseAll() and chart.expandAll() seem to work fine.

Expected behavior Clicking on Collapse button should collapse the tree to root node (O-6066). or, after clicking on Collapse All button, clicking on Expand button should expand the tree for root node.

Screenshots image

Desktop (please complete the following information):

  • OS: macOS
  • Browser: chrome
  • Version: 106.0.5249.119

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 2
  • Comments: 15 (7 by maintainers)

Most upvoted comments

I think you are right, issue is more complex than I was expecting.

When expanding a node, its children will get _expanded flag set to true. And when collapsing a node, only that node will get a _expanded=false attribute set, but we need to set _expanded=false to all of its children.

This is indeed a bug.

For the workaround, I think it’s possible to use

chart.setExpansionFlagToChildren(node,false) , so collapse function becomes following:


      function collapse(id) {
        const state = chart.getChartState();
        const allNodes = state.allNodes;
        const node = allNodes.find((d) => d.id == id);
        node.data._expanded = false;
        chart.setExpansionFlagToChildren(node, false);
        chart.render();
      }

Updated stackblitz:

https://stackblitz.com/edit/web-platform-xt2ba7?file=index.html

Just informing you about possible changes in org chart v3 which also concerns setExpanded method.

From now on setExpanded(nodeId,false) will actually collapse the node, even when it’s expanded by the user.

In the background, it will just set _expanded flag to all siblings and descendants (before it would set that flag only to the node itself, but if siblings also had this flag, rerender would not collapse this node).

Also improved collapsing position behavior. Now collapsed nodes always go to direct parent position (before, they’d go to root)

You will need to invoke render in the end

chart.setExpanded("O-6071").render()