Field Data in Expand button

Edit in BALKAN Code

You can customize the expand button and display data from each node directly inside it.

In this example, the plus button shows the node department and the number of collapsed children.

Example

OrgChart.templates.ana.plus = function (node, data, template, config) {
  return `
    <g transform="matrix(1,0,0,1,${node.w / 2},${node.h})">
        <rect x="-65" y="-10" height="20" width="130"
            fill="#fff" stroke-width="1" stroke="#aeaeae" rx="7" ry="7">
        </rect>
        <text x="0" y="5"
            text-anchor="middle"
            style="font-size:12px;cursor:pointer;"
            fill="#757575">
            ${data.department} (${node.collapsedChildrenIds.length})
        </text>
    </g>`;
};

let chart = new OrgChart(document.getElementById("tree"), {
  collapse: {
    level: 2
  },
  nodeBinding: {
    field_0: "name",
    field_1: "title",
    img_0: "img"
  },
});

let nodes = [
  { id: 1, name: "Michael Scott", title: "CEO", department: "Management" },

  { id: 2, pid: 1, name: "Dwight Schrute", title: "Director", department: "Sales" },
  { id: 3, pid: 1, name: "Jim Halpert", title: "Director", department: "Marketing" },
  { id: 4, pid: 1, name: "Pam Beesly", title: "Director", department: "Human Resources" },

  { id: 5, pid: 2, name: "Andy Bernard", title: "Sales Manager", department: "Sales" },
  { id: 6, pid: 2, name: "Stanley Hudson", title: "Sales Representative", department: "Sales" },
  { id: 7, pid: 2, name: "Phyllis Vance", title: "Sales Representative", department: "Sales" },

  { id: 8, pid: 3, name: "Ryan Howard", title: "Marketing Manager", department: "Marketing" },
  { id: 9, pid: 3, name: "Kelly Kapoor", title: "Marketing Specialist", department: "Marketing" },

  { id: 10, pid: 4, name: "Toby Flenderson", title: "HR Manager", department: "Human Resources" },
  { id: 11, pid: 4, name: "Holly Flax", title: "HR Specialist", department: "Human Resources" }
];

chart.load(nodes);

Useful Variables for the Expand Button

• 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

• Use data.<fieldName> for custom node fields, for example data.department.