Menus
Org Chart JS has these menus
- menu - top right corner
- nodeMenu - a button in the node
- nodeContextMenu - context menu for none
- nodeCircleMenu - a button in the node
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
var chart = new OrgChart (document.getElementById("tree"), {
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
var chart = new chart(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 chart(document.getElementById("tree"), {
nodeMenu: {
pdf: {
text: "Export To Pdf",
}
},
tags:{
overrideMenu:{
nodeMenu:{
edit: {text: "Edit" }
}
}
},
...
});
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 chart(document.getElementById("tree"), {
nodeMenu: {},
nodeContextMenu: {},
menu: {}
...
});
chart.nodeMenuUI.on('show', function(sender, args){
args.menu = { myMenuItem: { text: "My Text", icon: chart.icon.add(16,16,"#ccc"), onClick: function(id) {alert(id)} } }
});
chart.menuUI.on('show', function(sender, args){
args.menu = { myMenuItem: { text: "My Text", icon: chart.icon.add(16,16,"#ccc"), onClick: function(id) {alert(id)} } }
});
chart.nodeContextMenuUI.on('show', function(sender, args){
args.menu = { myMenuItem: { text: "My Text", icon: chart.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 } } } }, ... });