OrgChart JS Documentation

Add your own node menu item

Add your own menu item to the node menu with Icon, Click event and Text

 
    var chart = new OrgChart(document.getElementById("tree"), {
         nodeMenu: {
                call: {
                    icon: webcallMeIcon,
                    text: "Call now",
                    onClick: callHandler
                }
            },
            ...
    });
    

Icon can be image html element (img) or svg element. callHandler function has one parameter nodeId.

 
    function callHandler(nodeId) {
        var nodeData = chart.get(nodeId);
        var employeeName = nodeData["name"];
        window.open('https://webcall.me/' + employeeName, employeeName, 'width=340px, height=670px, top=50px, left=50px');
    }
    

Here is an example:

You can override node menu items by tagging a node

 
    var chart = new OrgChart(document.getElementById("tree"), {
         nodeMenu: {
                pdf: {
                    text: "Export To Pdf",
                }
            },
          tags:{
            	overrideMenu:{
              	nodeMenu:{
                	add: {text: "Add New" }
              	}
            }
          },
            ...
    });
    

You can override node menu items for specific node using tags

In the example below the node menu items for "Billy Moore" node will be different form node menus on other nodes: