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

menu

This is the main (hamburger) menu of the chart.

Here is how to add a menu in the OrgChart JS configuration with all the predefined menu items:

 
           Copy 
menu: {
    pdf_export: { text: "Export PDF" },
    png_export: { text: "Export PNG" },
    svg_export: { text: "Export SVG" },
    csv_export: { text: "Export CSV" },
    pp_preview: { text: "Crete PowerPoint Presentation" },
    pp_export: { text: "Export to powerPoint" }
},
     

Edit in BALKAN Code

Predefined menu items

• svg_export – Exports chart to SVG file
• pdf_export – Exports chart to PDF file
• png_export – Exports chart to PNG file
• visio_export – Exports chart to Visio (VSDX) file
• pp_export – Exports chart to PowerPoint (PPTX) file
• pp_preview – Opens a PPTX preview of the chart
• pdf_preview – Opens a PDF preview of the chart
• svg_preview – Opens a SVG preview of the chart
• png_preview – Opens a PNG preview of the chart
• csv_export – Exports chart to CSV file
• xml_export – Exports chart to XML file
• json_export – Exports chart to JSON file
• fit – Fits chart to the visible screen
• expand_all – Expands all collapsed nodes
• full_screen – Toggles fullscreen mode
• zoom_in – Zooms into the chart
• zoom_out – Zooms out of the chart
• layout_mixed – Switches chart layout to Mixed
• layout_normal – Switches chart layout to Normal
• layout_right_offset – Switches chart layout to Right Offset
• layout_left_offset – Switches chart layout to Left Offset
• layout_tree – Switches chart layout to Tree
• layout_grid – Switches chart layout to Grid

Node Menu

This is the menu that opent on the node menu button click.

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

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

Edit in BALKAN Code

Predefined nodeMenu items

• add - calls addNode method
• remove - calls removeNode method
• edit - calls editUI.show method
• details - calls editUI.show method
• svg_export – Exports chart to SVG file
• pdf_export – Exports chart to PDF file
• png_export – Exports chart to PNG file
• visio_export – Exports chart to Visio (VSDX) file
• pp_export – Exports chart to PowerPoint (PPTX) file
• pp_preview – Opens a PPTX preview of the chart
• pdf_preview – Opens a PDF preview of the chart
• svg_preview – Opens a SVG preview of the chart
• png_preview – Opens a PNG preview of the chart
• csv_export – Exports chart to CSV file
• xml_export – Exports chart to XML file
• json_export – Exports chart to JSON file
• fit – Fits chart to the visible screen
• expand_all – Expands all collapsed nodes
• full_screen – Toggles fullscreen mode
• zoom_in – Zooms into the chart
• zoom_out – Zooms out of the chart
• layout_mixed – Switches chart layout to Mixed
• layout_normal – Switches chart layout to Normal
• layout_right_offset – Switches chart layout to Right Offset
• layout_left_offset – Switches chart layout to Left Offset
• layout_tree – Switches chart layout to Tree
• layout_grid – Switches chart layout to Grid

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

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

callHandler function has one parameter nodeId.

 
       Copy 
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 
        pdf: {
            text: "Export To Pdf",
        }
     

 
       Copy 
        overrideMenu:{
            nodeMenu:{
                edit: {text: "Edit" }
            }
        }
     

 
       Copy 
        { 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

Node Context Menu

This is the menu that opent on right click on a node.

How to add it:

 
           Copy 
 nodeContextMenu: {
     edit: { text: "Edit", icon: OrgChart.icon.edit(18, 18, '#039BE5')  },
 },
  

Edit in BALKAN Code

Override node menu items for specific node using on show event

 
       Copy 
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

Custom icons

You can use custom icons for menu items. The icon can be an html element or svg element:

Edit in BALKAN Code

Node Circle Menu

To add a Node Circle Menu:

• First you need to define nodeCircleMenu for your template:

                 Copy 
  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 
      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 
  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 
  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 
  chart.nodeCircleMenuUI.on('drop', function (sender, args) {
      chart.addClink(args.from, args.to).draw(OrgChart.action.update);        
  });
   

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