The menu works fine but it is off to the right so i need to move it left. Once i edit it, the button no longer brings up the nodeMenu.
var chart = new OrgChart(document.getElementById("tree"), {
template: 'myTemplate',
enableSearch: true,
scaleInitial: 0.5,
layout: OrgChart.treeRightOffset,
sticky: false,
menu: {
pdf: { text: "Export PDF" },
png: { text: "Export PNG" },
svg: { text: "Export SVG" },
csv: { text: "Export CSV" }
},
toolbar: {
fit: true,
expandAll: true,
collapseAll: true,
},
collapse: {
level: 3,
allChildren: true
},
editUI: new editForm(),
nodeBinding:{
field_0: 'name',
field_1: 'title',
img_0: 'avatar'
},
nodeMenu: {
add: { text: "Add" },
edit: { text: "Edit" },
remove: { text: "Remove" }
},
Once i add the code below, the nodeMenu button will look different, changes the pointer on hover but now clicking on it has no effect.
OrgChart.templates.myTemplate.nodeMenuButton =
'<g style="cursor:pointer;" transform="matrix(1,0,0,1,193,15)" data-ctrl-n-menu-id="{id}">'
+ '<rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22">'
+ '</rect>'
+ '<line x1="0" y1="0" x2="0" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
+ '<line x1="7" y1="0" x2="7" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
+ '<line x1="14" y1="0" x2="14" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
+ '</g>';
It was a bug in the software, fixed by using a later version.
After reaching out to Balkan it was a confirmed bug as I was using a licensed version that was 2 years old.
When you use the Balkan code editor you access their latest free version via <script src="https://balkan.app/js/OrgChart.js"></script>. Which is why it was working through the code example but not on my test environment.
It is very important to always make sure to reference software versions when dealing with a peculiar issue.