Is it possible to expand a whole level at a time without clicking on each item individually in a level?

Org Chart
1

Hi,
We would like to expand a whole level at a time without clicking on each item individually in a level. Is there a way to do this? We have a list of nearly 2000 items with only 7 levels.
Thanks

2

This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.

Hi @SSmith ,
Yes, this is possible, however, I would advise against changing the default behavior.
Instead, I'd advise adding another button to the box container in the box template settings, like this:
image

You can then position and style the button any way you want.

After this, you can add an onlick event to this button with some additional JS:

renderer.onBoxRendered(function(event, box, itemData){
  
  var expand = function(){
    renderer.expandNodeLevels(n, function(){
  	console.log("Nodes are expanded");
	});
  }
  let n = itemData.pochContext.boxLevelNumber;
  box.elemContainer.querySelector('#expand').onclick = expand;
});
3

Hi,
Thank you for responding.

I'm looking to add 2 buttons: + to expand and - to collapse the next level:

image

The instructions above expand all levels at once, which is not what I'm looking to do. Is it possible to click on a button and expand/collapse to show all of the next level instead of clicking on each box displayed?

Thanks in advance

4

Hi,

Is my above question regarding expanding whole levels at a time possible?

Thanks

5

Hello Sally! The code provided by Vladimir works if you enable displaying the level number in the general settings:

image
image855×547 18.9 KB

It is necessary to get the value of the current level. If the option is not active, the "n" variable is undefined and therefore, the function expands all levels instead of a certain number of them. If you do not want to display the level number on the box, you can hide it with custom CSS but the option should be checked anyway.

6

Update for Org Chart 4.

The HTML snippet for the box template:

<div class="poch-box__field">
    <button class="expand">
        Expand next level
    </button>
</div>

image
image809×931 41.6 KB

The JavaScript snippet:

// When a box is rendered
api.onBoxRendered((box, itemData) => {
    // Assign its level number to a variable
    let levelNumber = itemData.pochContext.boxLevelNumber;
    //If it is defined
    if (levelNumber) {
        // assign the expanding function to the button in the box
        $(box.elem).find('#expand').click(function () {
            api.expandNodeLevels(levelNumber, function () {
                console.log("Nodes are expanded");
            });
        });
    // otherwise
    } else {
        // show a pop-up on clicking the button
        $(box.elem).find('#expand').click(function () {
            alert("Display the level number in box to make this work.")
        });
    }
});