Menus - OrgChart JS

by borisjavier

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"), {
    mouseScrool: OrgChart.action.none,
    template: "olivia",
    enableDragDrop: true,
    nodeMenu: {
      details: {
        text: "Details"
      },
      edit: {
        text: "Edit"
      },
      add: {
        text: "Add"
      },
      remove: {
        text: "Remove"
      }
    },
    nodeContextMenu: {
      edit: {
        text: "Edit",
        icon: OrgChart.icon.edit(18, 18, '#039BE5')
      },
      add: {
        text: "Add",
        icon: OrgChart.icon.add(18, 18, '#FF8304')
      }
    },
    dragDropMenu: {
      addInGroup: {
        text: "Add in group"
      },
      addAsChild: {
        text: "Add as child"
      }
    },
    menu: {
      pdf: {
        text: "Export PDF"
      },
      png: {
        text: "Export PNG"
      },
      svg: {
        text: "Export SVG"
      },
      csv: {
        text: "Export CSV"
      }
    },
    nodeBinding: {
      field_0: "name",
      field_1: "title",
      img_0: "img"
    },
    nodes: [{
        id: 1,
        name: "Billy Moore",
        title: "CEO",
        img: "https://cdn.balkan.app/shared/2.jpg"
      },
      {
        id: 2,
        pid: 1,
        name: "Billie Rose",
        title: "Dev Team Lead",
        img: "https://cdn.balkan.app/shared/5.jpg"
      },
      {
        id: 3,
        pid: 1,
        name: "Glenn Bell",
        title: "HR",
        img: "https://cdn.balkan.app/shared/10.jpg"
      },
      {
        id: 4,
        pid: 1,
        name: "Blair Francis",
        title: "HR",
        img: "https://cdn.balkan.app/shared/11.jpg"
      },

      {
        id: 5,
        pid: 3,
        name: "Skye Terrell",
        title: "Manager",
        img: "https://cdn.balkan.app/shared/12.jpg"
      },
      {
        id: 6,
        pid: 3,
        name: "Jordan Harris",
        title: "JS Developer",
        img: "https://cdn.balkan.app/shared/6.jpg"
      },
      {
        id: 7,
 ...