Menus

OrgChart JS has 5 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
  5. nodeCircleMenu - a button in the node
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(...);       
    

Node Circle Menu

To add a Node Circle Menu:

  • First you need to define nodeCircleMenu for your template:
    
            OrgChart.templates.olivia.nodeCircleMenuButton = {
                radius: 18,
                x: 250,
                y: 60,
                color: '#fff',
                stroke: '#aeaeae'
            };
            
  • Then you need to add nodeCircleMenu in the chart configuration:
    
                var chart = new OrgChart(document.getElementById("tree"), {
                    nodeCircleMenu: {
                        showId: {
                            icon: OrgChart.icon.info(24, 24, '#aeaeae'),
                            text: "Show ID",
                            color: "white"
                        },
                        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 to add menu item conditionaly:
    
            chart.nodeCircleMenuUI.on('show', function (sender, args){
                var 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"
                    };
                }    
            });
            
  • Use the click, drop, mouseenter or mouseout nodeCircleMenuUI events to create the node menu items functionality. Example:
    
                chart.nodeCircleMenuUI.on('click', function (sender, args) {
                    switch (args.menuItem.text) {
                        case "Show ID": alert(args.nodeId);
                        break;
                        case "Add node": {
                            var 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") {
                        var node = document.querySelector('[data-n-id="' + args.from + '"]');
                        node.style.opacity = 0.5;
                    }
                });
    
                chart.nodeCircleMenuUI.on('mouseout', function (sender, args) {
                    var node = document.querySelector('[data-n-id="' + args.from + '"]');
                    node.style.opacity = 1;
                });
    
            

  • You can use tags to define custom menu for particular nodes:
    
            var chart = new OrgChart(document.getElementById("tree"), {
                    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
                      }
                    },
                    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
                            }
                          }
                        }
                    },
                ...
            });