Expand/Collapse

You can specify expand/collapse state by setting expand/collapse options.

Expand and Collapse options

To initially collapse the chart to the second level, add this in the configuration:

collapse: {
    level: 2
}

Edit in BALKAN Code

In the example above if you click the expand button of node with id "2" all children will be expanded.

Here is an example how to collapse the chart to the second level and all children of the second level:

collapse: {
    level: 2,
    allChildren: true
}

Edit in BALKAN Code

In the example above if you click the expand button of node with id "2" only the children from the third level will be expanded.

Here is an example how to collapse the chart to the second level and all children of the second level, except node with id "4":

collapse: {
    level: 2,
    allChildren: true
},
expand: {
    nodes: [4]
}

Edit in BALKAN Code

Here is an example how to collapse the chart to the second level and all children of the second level, except node with id "4" and its children:

collapse: {
    level: 2,
    allChildren: true
},
expand: {
    nodes: [4],
    allChildren: true
}

Edit in BALKAN Code

Expand/Collapse programmatically

You can use the following methods: expand, collapse, expandCollapse

To expand all children to the leaf under a specific node, you need to iterate the nodes. Here is a code example.

Expand/Collapse on node click event

To expand or collapse on node click set nodeMouseClick to OrgChart.action.expandCollapse:

nodeMouseClick: OrgChart.action.expandCollapse,

Edit in BALKAN Code

In some cases you might not need the expand/collapse button, to hide it you will need to override the template.

To do it, add these before chart declaration:

OrgChart.templates.ana.plus = "";        
OrgChart.templates.ana.minus = "";

Edit in BALKAN Code

How to iterate and collapse all nodes and then expand by level:

Edit in BALKAN Code

onExpandCollpaseButtonClick event

To define custom expand/collapse logic use onExpandCollpaseButtonClick event. Here is a demo that you can use to get started.

How to iterate and collapse all on minus button click:

Edit in BALKAN Code

Number of nodes

To display the number of the direct children change the template as follows:

OrgChart.templates.ana.plus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
    <text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{children-count}</text>`;
OrgChart.templates.ana.minus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
    <text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{children-count}</text>`;

Edit in BALKAN Code

To display the number of the total children change the template as follows:

OrgChart.templates.ana.plus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
    <text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{children-total-count}</text>`;
OrgChart.templates.ana.minus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
    <text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{children-total-count}</text>`;

Edit in BALKAN Code

To display the number of the direct collapsed children change the template as follows:

OrgChart.templates.ana.plus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
    <text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{collapsed-children-count}</text>`;

Edit in BALKAN Code

To display the number of the total collapsed nodes change the template as follows:

OrgChart.templates.ana.plus = 
    `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
    <text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{collapsed-children-total-count}</text>`;

Edit in BALKAN Code

Dynamic Expand/Collapse

You can use a function to define the Expand/Collapse buttons.

Here are the node properties that you can use:

• node.childCount - number of direct children
• node.deepChildCount - total number of children
• node.collapsedChildCount - number of direct collapsed children
• node.deepCollapsedChildCount - total number of collapsed children

OrgChart.templates.ana.plus = function(node, data, template, config){
return `<g transform="matrix(1,0,0,1,${node.w},${node.h})">
    <rect x="-50" y="-30" height="20" width="40" fill="#fff" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>
    <line x1="-40" y1="-20" x2="-30" y2="-20" stroke="#757575" stroke-width="1"></line>
    <line x1="-35" y1="-15" x2="-35" y2="-25" stroke="#757575" stroke-width="1"></line>
    <text x="-15" y="-14" text-anchor="end" style="font-size: 18px;cursor:pointer;" fill="#757575">${node.childCount}</text>
</g>`;
};

OrgChart.templates.ana.minus = function(node, data, template, config){
return `<g transform="matrix(1,0,0,1,${node.w},${node.h})">
    <rect x="-50" y="-30" height="20" width="40" fill="#fff" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>
    <line x1="-40" y1="-20" x2="-30" y2="-20" stroke="#757575" stroke-width="1"></line>
    <text x="-15" y="-14" text-anchor="end" style="font-size: 18px;cursor:pointer;" fill="#757575">${node.childCount}</text>
</g>`;
};

Edit in BALKAN Code

Expand Up

Using the Up level functionality you can expand one level up.

The functionality is available when you have defined roots in the chart configuration:

roots: [3]

Edit in BALKAN Code

You can remove the Up level functionality by setting the Up field to empty string:

OrgChart.templates.ana.up = "";

Or you can change it. This is the Up field definition:

OrgChart.templates.ana.up = 
    `<rect x="20" y="-25" width="30" height="17" fill="#aeaeae" rx="3" ry="3"></rect>
    <line x1="35" x2="35" y1="0" y2="-8" stroke="#aeaeae" stroke-width="1"></line>`;