Grouping - OrgChart JS | BALKANGraph

OrgChart JS supports Grouping of nodes. Most organizations group departments by function—e.g. marketing, HR, sales, etc.—but you could also group by product for larger companies or physical location for international companies. author(s): BALKAN Software Plamen Peshev

by Cary Price

HTML

<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Helvetica;
}

#tree {
    width: 100%;
    height: 100%;
}

JavaScript

window.onload = function () {
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "polina",
        enableDragDrop: true,
        nodeMouseClick: OrgChart.action.edit,
        nodeMenu: {
            details: { text: "Details" },
            edit: { text: "Edit" },
            add: { text: "Add" },
            remove: { text: "Remove" }
        },
        dragDropMenu: {
            addInGroup: { text: "Add in group" },
            addAsChild: { text: "Add as child" }
        },
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img"
        },
        tags: {
            Directors: {
                group: true,
                groupName: "Directors",
                groupState: OrgChart.EXPAND,
                template: "group_grey"
            },
            HRs: {
                group: true,
                groupName: "HR Team",
                groupState: OrgChart.COLLAPSE,

                template: "group_grey"
            },
            Sales: {
                group: true,
                groupName: "Sales Team",
                groupState: OrgChart.EXPAND,
                template: "group_grey"
            },
            Devs: {
                group: true,
                groupName: "Dev Team",
                groupState: OrgChart.EXPAND,
                template: "group_grey"
            }
        },
        nodes: [
            { id: 1, tags: ["Directors"], name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
            { id: 2, tags: ["Directors"], name: "Marley Wilson", title: "Director", img: "https://balkangraph.com/js/img/3.jpg" },
            { id: 3, tags: ["Directors"], name: "Bennie Shelton", title: "Shareholder", img: "https://balkangraph.com/js/img/4.jpg" },

            { id: 4, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },

            { id: 5, pid: 1, tags: ["HRs"], name:...