OrgChartJS Docs

Edit

Build-in Edit Form

If you want to enable edit, add, remove actions set nodeMenu to the folllowing value:

 
    var chart = new OrgChart(document.getElementById("tree"), {
			nodeMenu:{
                details: {text:"Details"},
            	edit: {text:"Edit"},
            	add: {text:"Add"},
            	remove: {text:"Remove"}
            },
        ...
    });
    

Here is an example (to see the Edit Form click one the nodes):

Custom Edit Form

You can define your own Edit Form. The first thing that you have to do is to create javascript class with the following methods:

 
    var editForm = function () {
        ...
    };

    editForm.prototype.init = function (obj) {
        ...
    };

    editForm.prototype.show = function (node) {
        ...
    };

    editForm.prototype.hide = function (showldUpdateTheNode) {
        ...
    };
    

Then instantiate the editForm object

 
    var chart = new OrgChart(document.getElementById("tree"), {
            editUI: new editForm(),
            ...
    });
    

Here is an example (to see the Edit Form click one the nodes):

Node Click Behaviour

You can define 3 click behaviours

  • OrgChart.action.edit
  • OrgChart.action.details
  • OrgChart.action.none
 
    var chart = new OrgChart(document.getElementById("tree"), {
            nodeMouseClick: OrgChart.action.edit,
            ...
    });
    

Click in one of the nodes to see the edit view

Change the Edit fields in the default Edit form

The field event is called when you click on Edit button from the Node menu.


    chart.editUI.on('field', function(sender, args){
        
    }); 

You can use these 3 parameters to change the fieds in the Edit form:

  • args.field
  • args.type
  • args.name

Here is an example of how you can add a dropdown menu instead of an input:

and an example of how you can hide a field: