Get field data on node menu click. - OrgChart JS | BALKANGraph

Get field data on node menu click. author(s): BALKAN Software Plamen Peshev

by Nayana Das

HTML

<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%;
    font-family: Helvetica;
    overflow: hidden;
}

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

JavaScript

window.onload = function () { 

function callHandler() {
		console.log("inside call")
       // var nodeData = chart.get(nodeId);
        //var employeeName = nodeData["name"];
        window.open('https://www.google.com/maps','_blank');
}


    var chart = new OrgChart(document.getElementById("tree"), {
        nodeMenu: {
            add: { text: "Add New" 
                  },
            remove: { text: "Remove" },
        },
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img"
        }
    });
    
       chart.nodeMenuUI.on('show', function(sender, args){
       	
       		alert(sender.obj.get(args.firstNodeId).name);
          
          var node = sender.obj.getNode(args.firstNodeId);
          
        
       		if (node.childrenIds.length){
           args.menu = {
              add: { text: "Add New" },
           }
          }
          else{
          args.menu = {
              add: { text: "Add New" ,
              onClick: callHandler},
            	remove: { text: "Remove" },
           }
          }
    });
    
    chart.load([
            { id: 1, tags: ["F"], name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
            { id: 2, pid: 1, tags: ["M"], name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
            { id: 11, pid: 1, tags: ["M"], name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
            { id: 3, pid: 1, tags: ["R"],name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
            { id: 4, pid: 2, tags: ["R"],name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
            { id: 5, pid: 2, tags: ["T"],name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
            { id: 6, pid: 3, tags: ["Y"],name: "Tanner May", title: "Developer", img:...