OrgChart JS Documentation

Menus

OrgChart JS has 4 menus

  1. menu - top right corner
  2. nodeMenu - a button in the node
  3. nodeContextMenu - context menu for none
  4. dragDropMenu - used when the grouping or drag&drop is enabled
The demo bellow demonstrates how to define, menu, nodeMenu, nodeContextMenu and dragDropMenu in one chart:

Predefined menus items

  • add - calls addNode method
  • edit - calls editUI.show method
  • details - calls editUI.show method
  • remove - calls removeNode method
  • svg - calls exportSVG method
  • pdf - calls exportPDF method
  • png - calls exportPNG method
  • csv - calls exportCSV method
  • addInGroup - calls group method
  • addAsChild - calls linkNode method
For the predefined menu items you can specify the text and/or the icon
 
    var chart = new OrgChart(document.getElementById("tree"), {
      nodeContextMenu: {
        edit: { text: "Edit", icon: OrgChart.icon.edit(18, 18, '#039BE5')  },
        add: { text: "Add", icon: OrgChart.icon.add(18, 18, '#FF8304') }
      },
      ...
    });
    

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.

 
    var webcallMeIcon = <svg width="24" height="24" viewBox="0 0 300 400"><g transform="matrix...
    // the svg code is in the example below

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:

Override node menu items for specific node using tags

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" }
                }
            }
        },
    ...
});
    

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

Override node menu items for specific node using on show event

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeMenu: {},
        nodeContextMenu: {},
        dragDropMenu: {},
        menu: {}
        ...
    });

    chart.dragDropMenuUI.on('show', function(sender, args){
          args.menu = { myMenuItem: { text: "My Text", icon: OrgChart.icon.add(16,16,"#ccc"), onClick: function(id) {alert(id)} } }
    });
    
    chart.nodeMenuUI.on('show', function(sender, args){
          args.menu = { myMenuItem: { text: "My Text", icon: OrgChart.icon.add(16,16,"#ccc"), onClick: function(id) {alert(id)} } }
    });
    
    chart.menuUI.on('show', function(sender, args){
          args.menu = { myMenuItem: { text: "My Text", icon: OrgChart.icon.add(16,16,"#ccc"), onClick: function(id) {alert(id)} } }
    });
    
    chart.nodeContextMenuUI.on('show', function(sender, args){
          args.menu = { myMenuItem: { text: "My Text", icon: OrgChart.icon.add(16,16,"#ccc"), onClick: function(id) {alert(id)} } }
    });

    chart.load(...);       
    

Create custom menu (Advanced)

In the example below we will demosntrate how to create your own context menu in groupes