Show / Hide Table of Contents

Menus

OrgChart JS has these menus

  1. menu - top right corner
  2. nodeMenu - a button in the node
  3. nodeContextMenu - context menu for none
  4. nodeCircleMenu - a button in the node

Here is how to add a menu in the OrgChart configuration: 

 
        
    nodeMenu: {
        details: { text: "Details" },
        edit: { text: "Edit" },
        add: { text: "Add" },
        remove: { text: "Remove" }
    },

The demo bellow demonstrates how to define, menu, nodeMenu and nodeContextMenu in the OrgChart configuration:
BALKAN Code Edit in BALKAN Code

Predefined menus items

  • add - calls addNode method
  • remove - calls removeNode method
  • edit - calls editUI.show method
  • details - calls editUI.show method
  • svg - calls exportSVG method
  • pdf - calls exportPDF method
  • png - calls exportPNG method
  • csv - calls exportCSV method
For the predefined menu items you can specify the text and/or the icon 
 
    
    nodeContextMenu: {
        edit: { text: "Edit", icon: OrgChart.icon.edit(18, 18, '#039BE5')  },
    },

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

The icon can be image html element (img) or svg element: 

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

 
    
    nodeMenu: {
        call: {
            icon: webcallMeIcon,
            text: "Call now",
            onClick: callHandler
        }
    },

callHandler function has one parameter nodeId. 

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

Here is an example:

BALKAN Code Edit in BALKAN Code

Override node menu items for specific node using tags

You can override node menu items by tagging a node

If you have this in nodeMenu option: 
 
    
        pdf: {
            text: "Export To Pdf",
        }
To ovverride the menu for some nodes, add a tag in tags option: 
 
    
        overrideMenu:{
            nodeMenu:{
                edit: {text: "Edit" }
            }
        }
Then add the same tag in that nodes: 
 
    
        { id: 2, pid: 1, tags: ["overrideMenu"] }

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

BALKAN Code Edit in BALKAN Code

Override node menu items for specific node using on show event

The methods should be added before chart.load() 
 
    
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)} } }
});
Example:
BALKAN Code Edit in BALKAN Code

Node Circle Menu

To add a Node Circle Menu:

  • First you need to define nodeCircleMenu for your template: 
                
OrgChart.templates.ana.nodeCircleMenuButton = {
    radius: 18,
    x: 250,
    y: 60,
    color: '#fff',
    stroke: '#aeaeae'
};
  • Then you need to add nodeCircleMenu in the chart configuration: 
    
            
    nodeCircleMenu: {
        addNode: {
            icon: OrgChart.icon.add(24, 24, '#aeaeae'),
            text: "Add node",
            color: "white"
        },
        editNode: {
            icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
            text: "Edit node",
            color: "white"
        }, 
        addClink: {
            icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
            text: "Add C link",
            color: '#fff',
            draggable: true
        }
    }
  • You can use the show event also to add menu item conditionaly: 
    
        
chart.nodeCircleMenuUI.on('show', function (sender, args){
    let node = chart.getNode(args.nodeId);
    if (args.menu.delete)   
	    delete args.menu.delete;
    if (node.parent && !args.menu.delete){
        args.menu.delete = {
            icon: OrgChart.icon.remove(24, 24, '#aeaeae'),
            text: "Remove node",
            color: "white"
        };
    }    
});
  • Then use the click, drop, mouseenter or mouseout nodeCircleMenuUI events to create the node menu items functionality: 
            
chart.nodeCircleMenuUI.on('click', function (sender, args) {
    switch (args.menuItem.text) {
        case "Add node": {
            let id = chart.generateId();
            chart.addNode({ id: id, pid: args.nodeId});
        }
        break;
        case "Edit node": chart.editUI.show(args.nodeId);
        break;
        case "Remove node": chart.removeNode(args.nodeId);
        break;
        default:
    };
});

    
chart.nodeCircleMenuUI.on('drop', function (sender, args) {
    chart.addClink(args.from, args.to).draw(OrgChart.action.update);        
});

    
chart.nodeCircleMenuUI.on('mouseenter', function (sender, args) {
    if (args.menuItem.text == "Remove node") {
        let node = document.querySelector('[data-n-id="' + args.from + '"]');
        node.style.opacity = 0.5;
    }
});

    
chart.nodeCircleMenuUI.on('mouseout', function (sender, args) {
    let node = document.querySelector('[data-n-id="' + args.from + '"]');
    node.style.opacity = 1;
});
BALKAN Code Edit in BALKAN Code


  • You can use tags to define custom menu for particular nodes: 
    
            
    tags:{
        overrideMenu:{
            nodeCircleMenu: {
                addNode: {
                    icon: OrgChart.icon.add(24, 24, '#aeaeae'),
                    text: "Add node",
                    color: "white"
                },
                editNode: {
                    icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
                    text: "Edit node",
                    color: "white"
                },
                editNode1: {
                    icon: OrgChart.icon.edit(24, 24, '#F57C00'),
                    text: "Edit node 1",
                    color: "white"
                },
                addClink: {
                    icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
                    text: "Add C link",
                    color: '#fff',
                    draggable: true
                }
            }
        }
    }
BALKAN Code Edit in BALKAN Code

In this article