Menus

Org Chart 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 chart configuration:

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

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

 
    Copy code
    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:

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

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

callHandler function has one parameter nodeId.

 
    Copy code
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:

Edit in BALKAN Code

Override node menu items for specific node using tags

You can override node menu items by tagging a node

 
    Copy code
let chart = new OrgChart(document.getElementById("tree"), {
    nodeMenu: {
        pdf: {
            text: "Export To Pdf",
        }
    },
    tags:{
        overrideMenu:{
            nodeMenu:{
                edit: {text: "Edit" }
            }
        }
    },
    nodes: [
        { id: 1 },
        { 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:

Edit in BALKAN Code

Override node menu items for specific node using on show event

 
    Copy code
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)} } }
});
    

Edit in BALKAN Code

Node Circle Menu

To add a Node Circle Menu:

• First you need to define nodeCircleMenu for your template:

              Copy code
  OrgChart.templates.ana.nodeCircleMenuButton = {
      radius: 18,
      x: 250,
      y: 60,
      color: '#fff',
      stroke: '#aeaeae'
  };
          

• Then you need to add nodeCircleMenu in the chart configuration:

  
              Copy code
      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:

  
          Copy code
  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:

          Copy code
  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:
      };
  });
  

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

  Copy code
  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;
      }
  });
  

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

Edit in BALKAN Code

• You can use tags to define custom menu for particular nodes:

  
              Copy code
      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
                  }
              }
          }
      }
          

Edit in BALKAN Code