OrgChart JS Documentation

Grouping

OrgChart Grouping

Putting multiple nodes into one box saves a considerable amount of space compared with assigning each node their own box. For example if you have two Directors or two team leaders you will whant to group them.

To group two nodes into one set a tag to them. Here is an example:







 

    var chart = new OrgChart(document.getElementById("tree"), {
        ...
        nodes: [
            ...
           { id: 3, pid: 1, tags: ["HRs"], name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
           { id: 4, pid: 1, tags: ["HRs"], name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" },    
                
        ]
    });    

Define the tag

 

    var chart = new OrgChart(document.getElementById("tree"), {
        ...
        tags: {
            HRs: {
                group: true,
                groupName: "HR Team",
                groupState: OrgChart.COLLAPSE,
                template: "group_grey"
            }
        }
    });    

Where:

  • groupState could be OrgChart.COLLAPSE or OrgChart.EXPAND
  • groupName - the name of the group or the title of the group
  • group - true or false
  • template - the groupe template. Predifined templates for group nodes are group_orange, group_yellow and group_grey. Aslo you can define your own custom group template

Here is the result:

You can chage the appearance of one of the nodes inside a group by changing its template

 
        var chart = new OrgChart(document.getElementById("tree"), {
            template: "olivia",
            tags: {
                HRs: {
                    group: true,
                    groupName: "HR Team",
                    groupState: OrgChart.EXPAND,
                    template: "group_grey"
                },
                "Node with unique template": {                    
                    template: "luba"
                }
            },
            nodes: [
                ...
                { id: 4, pid: 1, tags: ["HRs", "Node with unique template"], name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
            ]
        });    

For more information on how to define unique template for a specific node see Multiple Templates

Drag and drop functionallity works perfectly with groups

    ...
    enableDragDrop: true,
    dragDropMenu: {
        addInGroup: { text: "Add in group" },
        addAsChild: { text: "Add as child" }
    },
    ...

When drag a node into group a context menu will appear with two menu items "Add in group" and "Add as child"

If you drag "Glenn Bell" and drop it in "Billie Rose" a new group will be created dynamically. For more information on how to persist dynamically created groups on the server see OrgChart Grouping with ASP.NET Core