Expand with a click of a button

Not sure if this is possible but thought I would try. Is it possible to configure a expand all/collapse all button? With the click of the button, it would expand the entire org chart. Click it again it would collapse.

Thanks in advance

Hello Eric! I am sorry for the long time you had to wait for a reply. In the case, you still have the issue with it, follow these steps:

  1. Open Org Chart configuration wizard, select a "Custom JavaScript" tab.

  2. Add the following code. I've tried to make it clear, but if you have any questions, don't hesitate to ask:

renderer.onInitialLoadingFinished(
    function(){
        //Button to expand/collapse nodes with initial text
        var expColButton = $('<a href="#" class="poch-control-panel-link" title="Expand all"><i class="ms-Icon ms-Icon--ChevronUp poch-fabric-icon"></i></a>');
        var msIcon = expColButton.find(".ms-Icon");


        //Appending the button to the right control zone
        $("#RightControlZone").prepend(expColButton);

        //Initializing a variable for further switching of code
        var isExpanded = false;

        //Configuring a function on a button click
        expColButton.click(function () {

            //If it's not expanded
            if (!isExpanded) {
                renderer.showLoadingPanel();
                //Expanding a specified number of nodes, in this case it's 100 but you can set a greater value
                renderer.expandNodeLevels(100, function(){
                    //Change button text to "Collapse"                    
                    msIcon.removeClass("ms-Icon--ChevronUp");
                    msIcon.addClass("ms-Icon--ChevronDown");
                    expColButton.attr("title", "Collapse all");
                    renderer.hideLoadingPanel();
                    //Setting the variable to "true" to execute another code on next click
                    isExpanded = true;
                });
            // If it's expanded
            } else {
                renderer.showLoadingPanel();
                renderer.collapseAllNodes(function () {
                    //Change button text to "Expand"                    
                    msIcon.removeClass("ms-Icon--ChevronDown");
                    msIcon.addClass("ms-Icon--ChevronUp");
                    expColButton.attr("title", "Expand all");
                    renderer.hideLoadingPanel();
                    //Setting the variable to "false" to execute another code on next click
                    isExpanded = false;
                });
            }
        });
    }
);

  1. You will get the following button in the right control zone:

  2. Customize its style as you wish.

I used Fluent UI icons for the button. You can use some other icons from the set:
https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

I used ms-Icon--ChevronDown (for expand) and ms-Icon--ChevronUp (for collapse) icons