BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Expand/Collapse ​

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

Expand and Collapse options ​

Collapse ​

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

javascript
collapse: {
    level: 2
}
Code iconEdit in BALKAN Code

Collpase all children ​

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:

javascript
collapse: {
    level: 2,
    allChildren: true
}
Code iconEdit in BALKAN Code

Collpase all children except nodes ​

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":

javascript
collapse: {
    level: 2,
    allChildren: true
},
expand: {
    nodes: [4]
}
Code iconEdit in BALKAN Code

Collpase all children except nodes with all chilren 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" and its children:

javascript
collapse: {
    level: 2,
    allChildren: true
},
expand: {
    nodes: [4],
    allChildren: true
}
Code iconEdit 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:

javascript
nodeMouseClick: OrgChart.action.expandCollapse,
Code iconEdit in BALKAN Code

Expand / Collpase Button ​

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:

javascript
OrgChart.templates.ana.plus = "";        
OrgChart.templates.ana.minus = "";
Code iconEdit in BALKAN Code

Collpase All Programmatically ​

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

Code iconEdit 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:

Code iconEdit in BALKAN Code

Number of nodes ​

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

javascript
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>`;
Code iconEdit in BALKAN Code

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

javascript
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>`;
Code iconEdit in BALKAN Code

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

javascript
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>`;
Code iconEdit in BALKAN Code

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

javascript
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>`;
Code iconEdit 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.childrenIds.length - number of direct children
  • node.deepChildCount - total number of children
  • node.collapsedChildrenIds.length - number of direct collapsed children
  • node.deepCollapsedChildCount - total number of collapsed children
javascript
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.childrenIds.length}</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.childrenIds.length}</text>
</g>`;
};
Code iconEdit 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:

javascript
roots: [3]
Code iconEdit in BALKAN Code

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

javascript
OrgChart.templates.ana.up = "";

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

javascript
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>`;

Advanced demo ​

Code iconEdit in BALKAN Code