Create Collaps ALL button in OrgChartJS UI

[srhong007]

Hello.

Because it is implemented as an organization chart provided by OrgChart JS, an expand all button is provided, but a collapse all button is not provided.

Instead of creating a separate Collapse All button, we placed it directly in the OrgChart UI and implemented the source code so that it can only be closed up to the expansion level (-) set in the options.

https://cafe.naver.com/gisapplication/1227

1. Click the Expand All button to open all images. Create a button image.

   • Search for "OrgChart.toolbarUI.expandAllIcon" in the OrgChart.js source. Create "OrgChart.toolbarUI.collapseAllIcon" below it and change x1, y1 to x2, x2 in the svg source indicated by the arrow.
   2. Code the click event of the Collapse All button created in the UI.
      • In OrgChart.js source, find source for existing expand all "o = this.div.querySelector('[data-tlbr="expand"]')" element. Then, insert "oo = this.div.querySelector('[data-tlbr="collapse"]')" to find the element below it.
      • Implement the Collapse All click event below the source code that implemented the click event for the Expand All element above.

o && o.addEventListener("click", function() { l.obj.expand(null, "all"); l.obj.fit(); }), oo && oo.addEventListener("click", function() { //l.obj.collapse(null, "all"); //srhong007 var collapse_level = l.obj.config.collapse.level || 0; collapse_level-=2; Node_collapse(l.obj.roots); l.obj.fit();

        function Node_collapse(_Node){
            for(var ii=0; ii< _Node.length; ii++){
                var _children = _Node[ii].children;
                if(_children && _children.length > 0){
                    Node_collapse(_children);
                }
                var _level = _Node[ii].level;
                var childrenIds = _Node[ii].childrenIds;
                if((_level >= collapse_level) && (childrenIds && childrenIds.length > 0)){
                    l.obj.collapse(_Node[ii].id, _Node[ii].childrenIds, !1);
                }
            }
        }
    })

• To implement "l.obj.collapse(null, "all")' like expand all, you can use the "all" parameter like open all in OrgChart.server._initNode function. The problem is that when closing all, the number of child nodes must be recalculated, and the level at which you want to close cannot be set, and all are folded, so it was excluded. a == OrgChart.action.expand && "all" == s.ids && (g.collapsed = !1), a == OrgChart.action.collapse && "all" == s.ids && (g.collapsed = 1),

[plamen-peshev]

It is very neat solution!

Is it possible to implement the same functionality here and to share the link

[srhong007]

You can include it in the existing source, but I tried it in an additional way. This is a function that uses a simple recursive call. share link https://code.balkan.app/create-collaps-all-button-in-orgchartjs-ui#JS

[ZornitsaPesheva]

Thank you for the code example. You can see here our collapse all example: https://code.balkan.app/org-chart-js/collapse-children-on-expand-and-collapse-all-button#JS

[srhong007]

Thank you. I already saw it too.

1. Instead of using only "root" in "Collapse All", I created a new one because separate coding was needed.
2. I also needed the ability to collapse to the desired "level". So, I tried making it a simple "recursive function" without any additional coding.