OrgChart JS Documentation

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 defin 3 click behaviours

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

Click in one of the nodes to see the edit view