Show / Hide Table of Contents

Expand/Collapse

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

1. Expand and Collapse options

Here is an example how to collpase the chart to the second level:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2
            },
            ...
        });
    

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 collpase the chart to the second level and all children of the second level:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            ...
        });
    

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 collpase the chart to the second level and all children of the second level, except node with id "4":

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            expand: {
                nodes: [4]
            }
            ...
        });
    


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

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            expand: {
                nodes: [4],
                allChildren: true
            }
            ...
        });
    

2. Expand/Collpase progammatically

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

2. Expand/Collpase on node click event

To expand or collapse on node click set nodeMouseClick to OrgChart.action.expandCollapse. Here is an example

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeMouseClick: OrgChart.action.expandCollapse,
        ...
    });    

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

 
    OrgChart.templates.ana.plus = "";        
    OrgChart.templates.ana.minus = "";
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ana",
        ...
    });    
    

How to itarate and collapse all nodes:


3. onExpCollClick event

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

How to itarate and collapse all on minus button click:


4. 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>';
    

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>';
    

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>';
    

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>';
    

5. 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 definition.

 
var chart = new OrgChart(document.getElementById("tree"), {

        roots: [3],
        nodes: [
            { id: 1 },
            { id: 2, pid: 1 },
            { id: 3, pid: 1 },
            { id: 4, pid: 1 },
            { id: 5, pid: 3 },
            { id: 6, pid: 3 },
        ]
    });
    

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>';