Show a Custom Edit Form for a node

In this example, node 1 gets a different set of buttons than all other nodes.

It does not have Edit and Remove buttons.

Edit in BALKAN Code

You can customize the edit form UI per node by handling the edit form show event.

Register this event listener before chart.load().

In this example, node 1 gets a different set of buttons than all other nodes.

Example

chart.editUI.on('show', function (sender, id) {
  if (id == 1) {
    chart.config.editForm.buttons = {
      edit: null,
      share: {
        icon: OrgChart.icon.share(24, 24, '#fff'),
        text: 'Share'
      },
      pdf: {
        icon: OrgChart.icon.pdf(24, 24, '#fff'),
        text: 'Save as PDF'
      },
      remove: null
    }
  }
  else {
    chart.config.editForm.buttons = {
      edit: {
        icon: OrgChart.icon.edit(24, 24, '#fff'),
        text: 'Edit',
        hideIfEditMode: true,
        hideIfDetailsMode: false
      },
      share: {
        icon: OrgChart.icon.share(24, 24, '#fff'),
        text: 'Share'
      },
      pdf: {
        icon: OrgChart.icon.pdf(24, 24, '#fff'),
        text: 'Save as PDF'
      },
      remove: {
        icon: OrgChart.icon.remove(24, 24, '#fff'),
        text: 'Remove',
        hideIfDetailsMode: true
      }
    };
  }
});

Key Points

• Use chart.editUI.on('show', ...) to apply dynamic edit form settings.
• Add event listeners before chart.load() so they are active from the first render.
• For node 1, edit and remove are disabled by setting them to null.
• For other nodes, the default set includes Edit, Share, Save as PDF, and Remove.