Toggle Between TreeList Layout and Normal Layout

Edit in BALKAN Code

First, define a tag that applies the treeList layout:

tags: {
    group: {
        subTreeConfig: {
            layout: OrgChart.layout.treeList,
            template: "treeListItem"
        }
    }
}

Then, listen for the toggle change and add or remove a wrapper group node. When the toggle is enabled, the root node becomes a child of the wrapper, which uses the group tag. Disabling the toggle restores the normal layout.

document.getElementById("btn").addEventListener("change", function () {
    if (this.checked) {
        data[0].stpid = "wrapper";
        data.push({ id: "wrapper", tags: ["group"] });
    } else {
        data[0].stpid = null;
        data.pop();
    }

    chart.draw();
});

This approach lets users switch between the two layouts instantly without reloading the chart or changing the original data structure.