Options

Go to top

theme

The GetOrgChart widget GetOrgChart uses different SVG Shapes to style its look and feel. If specific styling is needed, the following theme names can be used:
  • annabel
  • sara
  • belinda
  • cassandra
  • deborah
  • lena
  • monica
  • ula
  • eve
  • tal
  • vivian
  • ada
  • helen
Default value: "ula"
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {			
        theme: "vivian",
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

color

The GetOrgChart widget has a wealth of predefined colors. There are a total of 18 presets, which cover a wide variety of visual styles.
  • darkred
  • pink
  • darkorange
  • orange
  • lightgreen
  • green
  • lightteal
  • teal
  • lightblue
  • blue
  • darkpurple
  • purple
  • mediumdarkblue
  • darkblue
  • cordovan
  • darkcordovan
  • neutralgrey
  • black
Default value: "blue"
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            color: "blue",
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableEdit

Sets a value that indicates whether GetOrgChart widget can be edited.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableEdit: false,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableZoom

Sets a value that indicates whether GetOrgChart widget can be magnified.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableZoom: false,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableSearch

Enables advanced search.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableSearch: false,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableMove

Specifies whether the GetOrgChart pane can be moved by the user.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableMove: false,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableGridView

Specifies whether the GetOrgChart has grid view mode.
Default value: false
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableGridView: true,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableDetailsView

Specifies whether the GetOrgChart has details view mode.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableDetailsView: false,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enablePrint

Enables printing.
Default value: false
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enablePrint: true,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

enableZoomOnNodeDoubleClick

Enables zoom on node double click.
Default value: true
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            enableZoomOnNodeDoubleClick: false,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

scale

The scale factor determines what fraction of the entire scale is visible at one time.
Default value: auto - all boxes will be visible and centerent.
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            scale: 0.5,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

linkType

The GetOrgChart widget has a wealth of predefined link types.
  • M
  • B
Default value: "B"
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            linkType: "B",
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

orientation

Specifies the orientation of the GetOrgChart widget.
  • getOrgChart.RO_TOP
  • getOrgChart.RO_BOTTOM
  • getOrgChart.RO_RIGHT
  • getOrgChart.RO_LEFT
  • getOrgChart.RO_TOP_PARENT_LEFT
  • getOrgChart.RO_BOTTOM_PARENT_LEFT
  • getOrgChart.RO_RIGHT_PARENT_TOP
  • getOrgChart.RO_LEFT_PARENT_TOP
Default value: getOrgChart.RO_TOP
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
            orientation: getOrgChart.RO_LEFT,
            dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
        });
Edit in jsFiddle
Go to top

primaryFields

An array of columns that function as primary columns for the GetOrgChart widget. Only primary columns are visible on the main view. In the example bellow only the firstName column will be visible on the main view.
Default value: ["Name", "Title"]
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"),{			
                primaryFields: ["firstName"],
            dataSource: [
                { id: 1, parentId: null, firstName: "Amber", lastName: "McKenzie"},
                { id: 2, parentId: 1, firstName: "Ava Field", lastName: "Field"},
                { id: 3, parentId: 1, firstName: "Evie Johnson", lastName: "Johnson"}]
        });
Edit in jsFiddle
Go to top

photoFields

photoFields property specifies an image that is displayed in the image box.
Default value: ["Image"]
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        photoFields: ["pic"],
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie", pic: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-18.jpg"},
	        { id: 2, parentId: 1, Name: "Ava Field", pic: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-1.jpg"},
	        { id: 3, parentId: 1, Name: "Evie Johnson", pic: "http://getorgchart.com/GetOrgChart/getorgchart-demos/images/f-16.jpg"}]
    });
Edit in jsFiddle
Go to top

idField

idField property specifies the id property in the data source. If not specified the id is the first property of the data source
Default value: null
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        idField: "Key",
        dataSource: [
	        { Key: 1, parentKey: null, Name: "Amber McKenzie"},
	        { Key: 2, parentKey: 1, Name: "Ava Field" },
	        { Key: 3, parentKey: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

parentIdField

parentIdField property specifies the parent id property in the data source. If not specified the parent id is the second property of the data source
Default value: null
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        idField: "Key",
        parentIdField: "parentKey",
        dataSource: [
	        { Key: 1, parentKey: null, Name: "Amber McKenzie"},
	        { Key: 2, parentKey: 1, Name: "Ava Field" },
	        { Key: 3, parentKey: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

secondParentIdField

secondParentIdField property specifies the second parent (manager) id property in the data source. If not specified the node will not have link to second parent (manager) node.
Default value: null
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        idField: "Key",
        secondParentIdField: "secondManager",
        dataSource: [
	        { Key: 1, parentKey: null, Name: "1"},
            { Key: 2, parentKey: 1, Name: "2" },
	        { Key: 3, parentKey: 1, Name: "3" },
	        { Key: 4, parentKey: 2, secondManager: 1, Name: "4"}]
    });
Edit in jsFiddle
Go to top

levelSeparation

The gap between each level.
Default value: 100
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"),{			
        levelSeparation: 200,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}]
    });
Edit in jsFiddle
Go to top

siblingSeparation

The gap between boxes in a subtree.
Default value: 30
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"),{			
        siblingSeparation: 200,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"},
            { id: 4, parentId: 2, Name: "John"},
            { id: 5, parentId: 2, Name: "Hugo"},
            { id: 6, parentId: 3, Name: "Sivan"},
            { id: 7, parentId: 3, Name: "Arena"}]
    });
Edit in jsFiddle
Go to top

subtreeSeparation

The gap between subtrees.
Default value: 40
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        subtreeSeparation: 200,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"},
            { id: 4, parentId: 2, Name: "John"},
            { id: 5, parentId: 2, Name: "Hugo"},
            { id: 6, parentId: 3, Name: "Sivan"},
            { id: 7, parentId: 3, Name: "Arena"}]
    });
Edit in jsFiddle
Go to top

embededDefinitions

Allows graphical objects to be defined for later reuse.
Default value: ""
Code examples:
     var markerArrow = " ";
     var orgchart = new getOrgChart(document.getElementById("people"),{					
        embededDefinitions: markerArrow,
        dataSource: [
            { id: 1, parentId: null, Name: "Amber McKenzie"},
            { id: 2, parentId: 1, Name: "Ava Field"},
            { id: 3, parentId: 1, Name: "Evie Johnson"}
    });
Edit in jsFiddle
Go to top

dataSource

The data source.
Default value: null
Code examples:
Initialize from html table element. For more details open this demo and hit the button in the top right corner to see the HTML code.
    var orgchart = new getOrgChart(document.getElementById("people"),{
        dataSource: document.getElementById("orgChartTable") //orgChartTable is tableHTMLElement
    });
Initialize from XML. For more details open this demo and hit the button in the top right corner to see the HTML code. XML file.
    var orgchart = new getOrgChart(document.getElementById("people"),{
        dataSource: "/xmlrepository/getorgchart.xml" //xml file
    });
Initialize on the client. For more details open this demo and hit the button in the top right corner to see the HTML code.
     var orgchart = new getOrgChart(document.getElementById("people"),{
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}
    });
Go to top

customize

You can customize the color or theme on a specific box (node). For more details open this demo and hit the button in the top right corner to see the HTML code.
Default value: empty - all boxes are with the same color and theme.
Code examples:
         var orgChart = new getOrgChart(document.getElementById("people"), {
            theme: "monica",
            primaryFields: ["name", "title"],
            photoFields: ["image"],
            gridView: true,
            linkType: "B",
            dataSource: [
                { id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
                { id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson@jourrapide.com", image: "images/f-22.jpg" },
                { id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton@armyspy.com", image: "images/f-24.jpg" },
                { id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman@armyspy.com", image: "images/f-8.jpg" },
                { id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges@teleworm.us", image: "images/f-7.jpg" },
                { id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter@teleworm.us", image: "images/f-6.jpg" },
                { id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
            ],
            customize: {
                "1": { color: "green" },
                "2": { theme: "deborah" },
                "3": { theme: "deborah", color: "darkred" }
            }
        });
Go to top

expandToLevel

Expand first n level of the chart
Default value: 3.
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{
        expandToLevel: 2,
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}
    });
Edit in jsFiddle
Go to top

boxSizeInPercentage

Box size in percantage.
Default value: minBoxSize: { width: 5, height: 5 }, boxSize: { width: null, height: null }, maxBoxSize: { width: 100, height: 100 }
Code examples:
     var orgchart = new getOrgChart(document.getElementById("people"),{
        boxSizeInPercentage: {
            minBoxSize: {
                width: 5,
                height: 5
            },
            boxSize: {
                width: 20,
                height: 20
            },
            maxBoxSize: {
                width: 100,
                height: 100
            }
        },
        dataSource: [
	        { id: 1, parentId: null, Name: "Amber McKenzie"},
	        { id: 2, parentId: 1, Name: "Ava Field"},
	        { id: 3, parentId: 1, Name: "Evie Johnson"}
    });
Edit in jsFiddle
Go to top

layout

The layout of the orgchart.
Default value: null
Code examples:
       
         var orgChart = new getOrgChart(document.getElementById("people"), {
            primaryFields: ["name", "title"],
            gridView: true,
            layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
            dataSource: [
                { id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
                { id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson@jourrapide.com", image: "images/f-22.jpg" },
                { id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton@armyspy.com", image: "images/f-24.jpg" },
                { id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman@armyspy.com", image: "images/f-8.jpg" },
                { id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges@teleworm.us", image: "images/f-7.jpg" },
                { id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter@teleworm.us", image: "images/f-6.jpg" },
                { id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
            ],
        });
Edit in jsFiddle

Methods

Go to top

insertNode

Insert new node into specified parent .
Parameters:
  • pid - Parent id.
  • data - Json object. (optional)
  • id - The id of the new node. (optional)
Signature:
insertNode(pid, data, id);
Example
Go to top

updateNode

Update node.
Parameters:
  • id - The id of the node.
  • pid - Parent id of the node.
  • data - Json object with new values.
Signature:
insertNode(id, pid, data);
Example
Go to top

removeNode

Remove node.
Parameters:
  • id - The id of the node.
Signature:
removeNode(id);
Example
Go to top

loadFromHTMLTable

Load data from html table.
Parameters:
  • dataTable - Table DOM element.
Signature:
loadFromHTMLTable(dataTable);
Example
Go to top

loadFromHTMLTable

Load data from html table.
Parameters:
  • dataTable - Table DOM element.
Signature:
loadFromHTMLTable(dataTable);
Example
Go to top

loadFromJSON

Load data from html table.
Parameters:
  • json - Data source.
  • redraw - Set to 'truе' for initial load.
  • callback - Can be used for notifying animation complete.
Signature:
loadFromJSON(json, redraw, callback);
Example
Go to top

loadFromJSON

Load data from html table.
Parameters:
  • json - Data source.
  • redraw - Set to 'truе' for initial load.
  • callback - Can be used for notifying animation complete.
Signature:
loadFromJSON(json, redraw, callback);
Example
Go to top

loadFromXML

Load data from html table.
Parameters:
  • url - Url to the XML data.
Signature:
loadFromXML(url);
Example
Go to top

showDetailsView

Show details view. Details view is very similar to the edit view the only difference is that cannot bbe edited.
Parameters:
  • id - Id of the node.
Signature:
showDetailsView(id);
Example
Go to top

showEditView

Show edit view.
Parameters:
  • id - Id of the node.
Signature:
showEditView(id);
Example
Go to top

showGridView

Show grid view.
Parameters:
Signature:
showGridView();
Example
Go to top

showMainView

Show main view.
Parameters:
Signature:
showMainView();
Example
Go to top

move

Move the chart. If the position is a matrix the move is animated.
Parameters:
  • position - Possible values. left/down/right/up or viewBox matrix.
  • accelerator - Accelerates the move.
  • callback - Notify on animation complete. (optional)
Signature:
move(position, accelerator, callback);
Example
Go to top

zoom

Zoom out or zoom in the chart.
Parameters:
  • delta - True for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
  • animate - True/False. (optional)
  • center - Array [x, y], where x is x percantege from the width and y is y percentage from the height. (optional)
Signature:
zoom(delta, animate, center);
Example
Go to top

isCollapsed

Returns false if the node is not collapsed and all his parrents are not collapsed as well.
Parameters:
  • node.
Signature:
isCollapsed(node);
Example
Go to top

expandOrCollapse

If the node is expannded the method will collapse it and the oposite
Parameters:
  • id - Id of the node
Signature:
expandOrCollapse(id);
Example
Go to top

expand

Expands the node and all his parents nodes.
Parameters:
  • node -
  • callback - Executed when the animation completes.
Signature:
expand(node, callback) ;
Example
Go to top

highlightNode

Highlight node, if the node is collapsed will be expanded.
Parameters:
  • id - the id of the node
Signature:
 highlightNode(id);
Example

Events

Go to top

clickNodeEvent

On click interaction.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The clicked node.
Code examples:
        var orgchart = new getOrgChart(document.getElementById("people"), {
            clickNodeEvent: clickHandler,   
            dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
        });

        function clickHandler(sender, args) {
          alert("clecked node.id " + args.node.id);
        }

Edit in jsFiddle
Go to top

renderNodeEvent

On render node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
  • args.content - Array of svg elements that can be modified.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        renderNodeEvent: renderNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function renderNodeEvent(sender, args) {
        args.content[2] = args.content[2].replace("Amber McKenzie", "The name has been replaced");
    }
Edit in jsFiddle
Go to top

removeNodeEvent

On delete node.
Parameters:
  • sender - The GetOrgChart object.
  • args.id - The id of the node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        removeNodeEvent: removeNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function removeNodeEvent(sender, args) {
    	if (args.id == 1){
      	return false;
      }
    }

Edit in jsFiddle
Go to top

updateNodeEvent

On update node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        updateNodeEvent: updateNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function updateNodeEvent(sender, args) {
    	args.node.data["Name"] = "Test";
      //return false; 
        //return fasle if you want to cancel the event
    }
Edit in jsFiddle
Go to top

insertNodeEvent

On insert node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        insertNodeEvent: insertNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function insertNodeEvent(sender, args) {
    	args.node.data["Name"] = "Test";
      //return false; 
      //return fasle if you want to cancel the event
    }
Edit in jsFiddle
Go to top

createNodeEvent

On create node.
Parameters:
  • sender - The GetOrgChart object.
  • args.node - The node.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        createNodeEvent: createNodeEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function createNodeEvent(sender, args) {
        if (args.node.id == 2){
      	    return false; 
      	    //return fasle if you want to cancel the event
        }
      
        if (args.node.id == 1){
    		args.node.data["Name"] = "The name has been modified";
        }
    }
Edit in jsFiddle
Go to top

updatedEvent

Called after insertNodeEvent, removeNodeEvent and updateNodeEvent.
Parameters:
  • sender - The GetOrgChart object.
Code examples:
    var orgchart = new getOrgChart(document.getElementById("people"), {
        updatedEvent: updatedEvent,
        dataSource: [{id: 1,parentId: null,Name: "Amber McKenzie"}, {id: 2,parentId: 1,Name: "Ava Field"}, {id: 3,parentId: 1,Name: "Evie Johnson"}]
    });
    function updatedEvent(sender, args) {
      alert("updatedEvent")
    }
Edit in jsFiddle