OrgChart JS Documentation

API Reference

Quick Navigation
Options Methods Events
lazyLoading updateNode update
enableDragDrop update remove
enableSearch removeNode add
nodeMenu remove redraw
dragDropMenu addNode imageuploaded
menu add updatetags
nodeMouseClick addTag click
mouseScrool removeTag expcollclick
showXScroll addNodeTag exportstart
showYScroll removeNodeTag exportend
template group searchclick
tags link dbclick
nodeBinding linkNode import
linkBinding center drop
nodes ripple
levelSeparation getScale
siblingSeparation zoom
subtreeSeparation exportSVG
mixedHierarchyNodesSeparation exportPNG
padding exportPDF
orientation exportCSV
layout draw
scaleInitial expand
scaleMin collapse
scaleMax fit
orderBy find
exportUrl exportXML
collapse importCSV
expand importXML
searchFields load
anim loadXML
zoom getXML
align addClink
toolbar removeClink
nodeMouseDbClick expandCollapseToLevel
sticky
clink
nodeContextMenu
lazyLoading

Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need.

Default value: true

Code example:

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

Go to Quick Navigation
enableDragDrop

With the drag and drop features of OrgChart, you can move nodes easily.

Default value: true

Code example:

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

Go to Quick Navigation
enableSearch

Enables advanced search.

Default value: true

Code example:

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

Go to Quick Navigation
nodeMenu

Enables edit, add, remove and other node operations. Also you can define your own node operation for more information see Node Menu Item

Default value: null

Code example:

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

Go to Quick Navigation
dragDropMenu

Use dragDropMenu with drag & drop and grouping feature.

Default value: null

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
	    dragDropMenu: {
            addInGroup: { text: "Add in group" },
            addAsChild: { text: "Add as child" }
        },
        ...
    });
    

Go to Quick Navigation
nodeMouseClick

nodeMouseClick can accept the following values:

  • OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
  • OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
  • OrgChart.action.expandCollapse - will expand or collapse the children nodes
  • OrgChart.action.none - do nothing on node click event

Default value: OrgChart.action.details

Code example:

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

Go to Quick Navigation
mouseScrool

mouseScrool can accept the following values:

  • OrgChart.action.zoom - will zoom in/out on mouse scroll
  • OrgChart.action.xScroll - left/right move of the chart on mouse scroll
  • OrgChart.action.yScroll - up/down move of the chart on mouse scroll
  • OrgChart.action.none - do nothing on mouse scroll

Default value: OrgChart.action.zoom

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       mouseScrool: OrgChart.action.zoom
        ...
    });
    

Go to Quick Navigation
showXScroll

showXScroll can accept the following values:

  • OrgChart.none
  • OrgChart.scroll.visible - Will display horisontal scroll bar

Default value: OrgChart.none

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       showXScroll: OrgChart.scroll.visible
        ...
    });
    

Go to Quick Navigation
showYScroll

showYScroll can accept the following values:

  • OrgChart.none
  • OrgChart.scroll.visible - Will display vertical scroll bar

Default value: OrgChart.none

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       showYScroll: OrgChart.scroll.visible
        ...
    });
    

Go to Quick Navigation
template

Set template if you want to change the appearance of the chart. OrgChart JS comes with number of build-in templates:

  • ana
  • ula
  • olivia
  • belinda
  • rony
  • mery
  • polina
  • mila
  • diva
  • luba
  • derek
  • base

Also you can define your own template. For more information see Creating Custom Template

Default value: ana

Code example:

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

Go to Quick Navigation
tags

With tags option you can:

  • Set specific template for tagged nodes
  • Set the default state (expand/collapse) for tagged nodes
  • Define a group for tagged nodes
  • Set node as assistant for tagged nodes
  • Set node menu items for tagged nodes


Set specific template for tagged nodes. See Multiple Templates in one chart for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            Management: {
                template: "rony"
            }
        },     
        nodes: [
            { id: 1, tags: ["Management"] },        
        ...
    });
    


Set the default state (expand/collapse) for tagged nodes. See Expand/Collapse for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            hide: {
                state: OrgChart.COLLAPSE
            }
        },
        ....
        nodes: [
            { id: "1" },
            { id: "2", tags: ["hide"] },
            { id: "3" }
            ...
        ]
    });
    


Define a group for tagged nodes. See Grouping for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            HRs: {
                group: true,
                groupName: "HR Team",
                groupState: OrgChart.EXPAND,
                template: "group_grey"
            }
        },
        nodes: [
            { id: 1, tags: ["HRs"] }
        ...
    });     
    


Set node as assistant for tagged nodes. See Assistant for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags: {
            assistant: {
                template: "mery"
            }
        }
        nodes: [
            { id: 1, tags: ["assistant"] }
        ...
    });     
    


Set node menu items for tagged nodes. See Node Menu Item for more details.

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        tags:{
            customMenuItems:{
                nodeMenu:{
                    add: {text: "Add New" }
              	}
            }
          },
        ...
    });
    

Go to Quick Navigation
nodeBinding

Node binding in OrgChart JS maps node data to node template parameters.

Code example:

 
     var chart = new OrgChart(document.getElementById("orgchart"), {
            nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]
        });
    

In the example above the field name will be bount to field_0 from the template.

Also you can define your own field in the templae, for more information go to Fields page.


Go to Quick Navigation
linkBinding

Link binding in OrgChart JS maps node data to link template parameters.

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            linkBinding: {
                link_field_0: "createdAt"
            },
            nodes: [
                { id: "1", name: "Amber McKenzie"  },
                { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
                { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
            ]
        }); 
    

Go to Quick Navigation
nodes

Array of node data JSON objects. nodes option is the data source of the chart.

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            nodes: [
                { id: "1" },
                { id: "2", pid: "1" },
                { id: "3", pid: "1", tags: ["Sales"] }
            ]
        }); 
    

Node JSON objects could have unlimited number of properties, id, pid, spids and tags are reserved node properties.

  • id - unique identifier, it clould be integer or string
  • pid - is the parent id
  • spids - array of second parrent ids
  • tags - array of strings

Go to Quick Navigation
levelSeparation

The gap between each level.

Default value: 60

Code example:

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

Go to Quick Navigation
siblingSeparation

The gap between nodes in a subtree.

Default value: 20

Code example:

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

Go to Quick Navigation
subtreeSeparation

The gap between subtrees.

Default value: 40

Code example:

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

Go to Quick Navigation
mixedHierarchyNodesSeparation

The gap between nodes in vertical layout.

Default value: 20

Code example:

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

Go to Quick Navigation
padding

The padding option sets the padding area on all four sides of the OrgChart.

Default value: 30

Code example:

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

Go to Quick Navigation
orientation

Specifies the orientation of the OrgChart JS. could accept one of the following values:

  • OrgChart.orientation.top
  • OrgChart.orientation.bottom
  • OrgChart.orientation.right
  • OrgChart.orientation.left
  • OrgChart.orientation.top_left
  • OrgChart.orientation.bottom_left
  • OrgChart.orientation.right_top
  • OrgChart.orientation.left_top

Default value: OrgChart.orientation.top

Code example:

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

Go to Quick Navigation
layout

The layout of the OrgChart

  • OrgChart.normal
  • OrgChart.mixed
  • OrgChart.tree
  • OrgChart.treeLeftOffset
  • OrgChart.treeRightOffset

Default value: OrgChart.normal

Code example:

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

Go to Quick Navigation
scaleInitial

The scale factor determines what fraction of the entire scale is visible at one time.

  • OrgChart.match.height
  • OrgChart.match.width
  • OrgChart.match.boundary
  • [float]

Default value: 1

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            scaleInitial: 0.5
        });  
    
For more information go to Layout page.
Go to Quick Navigation
scaleMin

Determines the minimum scale factor.

Default value: 0.1

Code example:

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

Go to Quick Navigation
scaleMax

Determines the naximum scale factor.

Default value: 5

Code example:

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

Go to Quick Navigation
orderBy

The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array.

Default value: null

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            orderBy: "orderId",
            nodes: [
                ...
                { id: 10, pid: 1, orderId: 2 },
                { id: 11, pid: 1, orderId: 1 }
                ...
            ]
        }); 
    

In the example above node with id 11 will be before node with id 10. orderBy can be set to any property from the node JSON object, string or integer.


Go to Quick Navigation
exportUrl

The URL to the export server.

Default value: https://balkangraph.com/export

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            exportUrl: "https://balkangraph.com/export",
            ...
        }); 
    

Go to Quick Navigation
collapse

Collapse specified level of the chart and its children if allChildren is true.

Code example:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            ...
        });
    

Go to Quick Navigation
expand

Expand specified node ids and its children if allChildren is true.

The expand option works only if collapse is set.

In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.

Code example:

        var chart = new OrgChart(document.getElementById("tree"), { 
            collapse: {
                level: 2,
                allChildren: true
            },
            expand:{
                nodes: [155],
                allChildren: true
            }
            ...
        });
    

Go to Quick Navigation
searchFields

Search by the fields defined in searchFields.

Default value: Empty array

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            searchFields: ["name", "title", etc...],
            ...
        }); 
    

Go to Quick Navigation
anim

Can be used to control the transition of the nodes on expand/collapse operation.

Default value: func: OrgChart.anim.outPow, duration: 200

duration: defines how long time an animation should take to complete

func: Easing functions specify the speed at which an animation progresses at different points within the animation. Can accept one of the following values:

  • OrgChart.anim.inPow
  • OrgChart.anim.outPow
  • OrgChart.anim.inOutPow
  • OrgChart.anim.inSin
  • OrgChart.anim.outSin
  • OrgChart.anim.inOutSin
  • OrgChart.anim.inExp
  • OrgChart.anim.outExp
  • OrgChart.anim.inOutExp
  • OrgChart.anim.inCirc
  • OrgChart.anim.outCirc
  • OrgChart.anim.inOutCirc
  • OrgChart.anim.rebound
  • OrgChart.anim.inBack
  • OrgChart.anim.outBack
  • OrgChart.anim.inOutBack

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            anim: {
                func: OrgChart.anim.outBack,
                duration: 500
            },
            ...
        }); 
    

Go to Quick Navigation
zoom

Can be used to control the zooming sensitivity.

Default value: speed: 120, smooth: 12

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            zoom: {
                speed: 130,
                smooth: 10
            },
            ...
        }); 
    

Go to Quick Navigation
align

The align option specifies the alignment of the nodes inside OrgChart JS.

Default value: OrgChart.CENTER

  • OrgChart.CENTER - centered
  • OrgChart.ORIENTATION - according to the orientation option

Code example:

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

Go to Quick Navigation
toolbar

A toolbar is a set of icons or buttons.

Default value: null

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            toolbar: {
                layout: true,
                zoom: true,
                fit: true,
                expandAll: false
            },

            ...
        }); 
    

Go to Quick Navigation
nodeMouseDbClick

nodeMouseDbClick can accept the following values:

  • OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
  • OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
  • OrgChart.action.expandCollapse - will expand or collapse the children nodes
  • OrgChart.action.none - do nothing on node double click event

Default value: OrgChart.none

Code example:

 
    var chart = new OrgChart(document.getElementById("tree"), {
       nodeMouseDbClick: OrgChart.action.edit
        ...
    });
    

Go to Quick Navigation
sticky

Stop the org chart locking to the top of the screen once you move it.

Default value: true

Code example:

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

Go to Quick Navigation
nodeContextMenu

Context menu. Also you can define your own node operation for more information see Menu

Default value: null

Code example:

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

Go to Quick Navigation
updateNode

Updates the node JSON object.

Signature:

 
        chart.updateNode(nodeJSONdata);
    

Parameters:

  • nodeJSONdata - node json data

Code example:

 
        chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
    

Will update the node with id 4 and will redraw the chart.


Go to Quick Navigation
update

Updates the node JSON object.

Signature:

 
        chart.update(nodeJSONdata);
    

Parameters:

  • nodeJSONdata - node json data

Code example:

 
        chart.update({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
    

Will find the node with id 4 but it will not redraw the chart, you can use this method when you need to update two or more nodes, then call the draw function.


Go to Quick Navigation
removeNode

Removes specified node from nodes collection.

Signature:

 
        chart.removeNode(nodeId);
    

Parameters:

  • nodeId - id of the node

Code example:

 
        chart.removeNode(5);
    

Will remove node with id 5 and will redraw the chart.


Go to Quick Navigation
remove

Removes specified node from nodes collection.

Signature:

 
        chart.remove(nodeId);
    

Parameters:

  • nodeId - id of the node

Code example:

 
        chart.remove(5);
    

Will remove node with id 5 but it will not redraw the chart, you can use this method when you need to remove two ore more nodes, then call the draw function.


Go to Quick Navigation
addNode

Adds new node to the nodes collection.

Signature:

 
        chart.addNode(nodeJSONdata);
    

Parameters:

  • nodeJSONdata - node JSON data

Code example:

 
        chart.addNode({ id: 4, pid: 2, name: "Name 1", title: "Title 1" });
    

Will add new node and will redraw the chart.


Go to Quick Navigation
add

Adds new node to the nodes collection.

Signature:

 
        chart.add(nodeJSONdata);
    

Parameters:

  • nodeJSONdata - node JSON data

Code example:

 
        chart.add({ id: 4, pid: 2, name: "Name 1", title: "Title 1" });
    

Will add new node but it will not redraw the chart, you can use this method when you need add two or more nodes, then call the draw function.


Go to Quick Navigation
addTag

Adds tag to the tags config collection.

Signature:

 
        chart.addTag(name, tag);
    

Parameters:

  • name - the name of the tag
  • tag - the actual tag

Code example:

 
        chart.addTag("Directors", { template: "derek"} );
    

Go to Quick Navigation
removeTag

Removes tag from the tags config collection.

Signature:

 
        chart.removeTag(name);
    

Parameters:

  • name - the name of the tag

Code example:

 
        chart.removeTag("Directors");
    

Go to Quick Navigation
addNodeTag

Adds tag to the node tags collection.

Signature:

 
        chart.addNodeTag(nodeId, tagName);
    

Parameters:

  • nodeId - the id of the node
  • tagName - the tag name

Code example:

 
        chart.addNodeTag(5, "Directors");
    

Go to Quick Navigation
removeNodeTag

Removes tag from the node tags collection.

Signature:

 
        chart.removeNodeTag(nodeId, tagName);
    

Parameters:

  • nodeId - the id of the node
  • tagName - the tag name that will be removed

Code example:

 
        chart.removeNodeTag(5, "Directors");
    

Go to Quick Navigation
group

Groups two nodes into a group.

Signature:

 
        chart.group(sourceNodeId, targetNodeId);
    

Parameters:

  • sourceNodeId - the id of the source node
  • targetNodeId - the id of the target node

Code example:

 
        chart.group(5, 6);
    

Go to Quick Navigation
linkNode

Adds a link between two nodes.

Signature:

 
        chart.linkNode(fromNodeId, toNodeId);
    

Parameters:

  • fromNodeId - the id of the child node
  • toNodeId - the id of the parent node

Code example:

 
        chart.linkNode(5, 6);
    

It will create a link from node 5 to node 6 and will redraw the chart.


Go to Quick Navigation
center

Center specified node on the screen.

Signature:

 
        chart.center(nodeId, options);
    

Parameters:

  • nodeId - the id of the node
  • options - { parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false });

Code example:

 
        chart.center(5,     {
                parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS,
                childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS,
                rippleId: 1,
                vertical: true,
                horizontal: false
            }););
    

Go to Quick Navigation
ripple

Animate specified node with ripple animation - highlight the node.

Signature:

 
        chart.ripple(nodeId);
    

Parameters:

  • nodeId - the id of the node

Code example:

 
        chart.ripple(5);
    

Go to Quick Navigation
getScale

Gets the current scale of the chart.

Signature:

 
        chart.getScale();
    

Code example:

 
        var scale = chart.getScale();
    

Go to Quick Navigation
zoom

Zoom out or zoom in the chart.

Signature:

 
        chart.zoom(delta, center, anim);
    

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.
  • center - Array [x, y], where x is x percantege from the width and y is y percentage from the height. (optional)
  • anim - true, false (optional)

Code example:

 
        chart.zoom(2, [20,20]);
    

Go to Quick Navigation
exportSVG

Exports the chart to svg file.

Signature:

 
        chart.exportSVG(filename, expandChildren, nodeId);
    

Parameters:

  • filename - (optional) file name
  • expandChildren - (optional) true/false, expands all children of root node if it set to true
  • nodeId - (optional) root node id

Code example:

 
        chart.exportSVG("MyOrgChart.svg", true, 4);
    

Go to Quick Navigation
exportPNG

Exports the chart to png file.

Signature:

 
        chart.exportPNG(options);
    

Parameters:

  • options - export options

Code example:

 
        chart.exportPNG({
            filename: "MyOrgChart.png", 
            nodeId: 5, 
            expandChildren: true, 
            margin: [10,20,10,20],
            header: 'My header',
            footer: 'Page {current-page} of {total-pages}',
        });
    

Go to Quick Navigation
exportPDF

Exports the chart to pdf file.

Signature:

 
        chart.exportPDF(options);
    

Parameters:

  • options - export options

Code example:

 
        chart.exportPDF({
            landscape: true, //false
            format: "A4", //fit, fit2Levels, A42Levels
            filename: "MyOrgChart.pdf", 
            nodeId: 5, 
            expandChildren: true, 
            margin: [10,20,10,20],
            header: 'My header',
            footer: 'Page {current-page} of {total-pages}',
            scale: 'fit' //100
        });
    

Go to Quick Navigation
exportCSV

Exports the chart to CSV file.

Signature:

 
        chart.exportCSV(options);
    

Parameters:

  • options - export options

Code example:

 
        chart.exportCSV({
            filename: "MyOrgChart.svg", 
            nodeId: 5, 
            expandChildren: true
        });
    

Go to Quick Navigation
draw

Draws the chart.

Signature:

 
        chart.draw(action);
    

Parameters:

  • action - (optional) OrgChart.action.expandCollapse, OrgChart.action.update and OrgChart.action.centerNode

Code example:

 
        chart.draw();
    

Go to Quick Navigation
expand

Expand specified nodes.

Signature:

 
        chart.expand(id, ids, callback);
    

Parameters:

  • id - the id of the node that will not move
  • ids - node ids that will be expanded
  • callback - (optional) called after the animation completes

Code example:

 
        chart.expand(5, [155]);
    

Go to Quick Navigation
collapse

Collapse specified nodes.

Signature:

 
        chart.collapse(id, ids, callback);
    

Parameters:

  • id - the id of the node that will not move
  • ids - node ids that will be collapsed
  • callback - (optional) called after the animation completes

Code example:

 
        chart.collapse(5, [155]);
    

Go to Quick Navigation
fit

Fits the content to the visible area.

Signature:

 
        chart.fit();
    

Code example:

 
        chart.fit();
    

Go to Quick Navigation
find

Finds node from the nodes collection.

Signature:

 
        chart.find(value);
    

Parameters:

  • value - search by definded value

Code example:

 
        chart.find("John");
    

Go to Quick Navigation
exportXML

Exports the chart to XML file.

Signature:

 
        chart.exportXML(filename);
    

Parameters:

  • filename - the name of the file

Code example:

 
        chart.exportXML("MyOrgChart.svg");
    

Go to Quick Navigation
importCSV

Import CSV file.

Signature:

 
        chart.importCSV();
    

Code example:

 
        chart.importCSV();
    

Go to Quick Navigation
importXML

Import XML file.

Signature:

 
        chart.importXML();
    

Code example:

 
        chart.importXML();
    

Go to Quick Navigation
load

Load nodes file.

Signature:

 
        chart.load(nodes json array);
    

Code example:

 
        chart.load([{id: 1}]);
    

Go to Quick Navigation
loadXML

Load nodes from xml.

Signature:

 
        chart.loadXML(xml as text);
    

Code example:

 
        chart.loadXML('<?xml version="1.0" encoding="utf-8" ?><nodes><node id="1" name="plamen"/><node id="2" pid="1" name="ivan"/></nodes>');
    

Go to Quick Navigation
getXML

Gets nodes as xml.

Signature:

 
        chart.getXML();
    

Code example:

 
        var xml = chart.getXML();
    

Go to Quick Navigation
expandCollapseToLevel

Expand/Collapse to level.

Signature:

 
        chart.expandCollapseToLevel(id, collapse, expand, callback);
    

Code example:

 
        chart.expandCollapseToLevel({
                level: 2
            }, {
                nodes: [155]
            }, function(){
                console.log('callback')
            });
    

Go to Quick Navigation
update

Update node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • oldNode - old node JSON object
  • newNode - new node JSON object

Code example:

 
        var chart = new OrgChart(...);
        
        chart.on('update', function (sender, oldNode, newNode) {
            // your code goes here 
            // return false; to cancel the operation
        });  

        chart.load(...);
    

Go to Quick Navigation
remove

Remove node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodeId - the id of the node that will be removed

Code example:

 
        var chart = new OrgChart(...);
        
         chart.on('remove', function (sender, nodeId) {
            // your code goes here 
            // return false; to cancel the operation
        });  

        chart.load(...);
    

Go to Quick Navigation
add

Add node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • node - node JSON object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('add', function (sender, node) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
redraw

Redraw OrgChart event.

Parameters:

  • sender - OrgChart JS object for which the event is fired

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('redraw', function (sender) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
imageuploaded

Image uploaded OrgChart event.

Parameters:

  • file - the file that will be uploded to the server
  • inputHtmlElement - input html element

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('imageuploaded', function (file, inputHtmlElement) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    
For more information on how to upload images to the server go to Tutorial: How to Upload Image Files from OrgChart JS to the server - ASP.NET Core
Go to Quick Navigation
updatetags

Update Tags event. This event is called when new tag is added in the config tags collection usually this happens when group method is called

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • tags - config tags object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('updatetags', function (sender, tags) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    
For more information on how to persist tags on the server go to OrgChart Grouping with ASP.NET Core
Go to Quick Navigation
click

On click node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • node - node JSON object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('click', function (sender, node) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
expcollclick

On expand/collapse button click event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • action - OrgChart.EXPAND or OrgChart.COLLAPSE
  • id - the id of the clicked node
  • ids - node ids that will be expanded or collapsed

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('expcollclick', function (sender, action, id, ids) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
exportstart

Fires before the export operation. Use this event to show loading image.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • options - export options
  • svg - svg DOM element

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('exportstart', function (sender, options, svg) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
exportend

Fires afetr the export operation completes. Use this event to hide loading image.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • options - export options
  • content - the content

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('exportend', function (sender, options, content) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
searchclick

Fires when the user click on an item from the search grid.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodeId - Node id

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('searchclick', function (sender, nodeId) {
            // your code goes here 
            // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
dbclick

On double click node event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • node - node JSON object

Code example:

 
         var chart = new OrgChart(...);
        
         chart.on('dbclick', function (sender, node) {
           // your code goes here 
           // return false; to cancel the operation
         });  

         chart.load(...);
    

Go to Quick Navigation
import

On import event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • nodes - Imported nodes JSON object

Code example:

 
        var chart = new OrgChart(...);

        chart.on('import', function(sender, nodes){
            // your code goes here 
            // return false; to cancel the operation
        }); 

        chart.load(...);   
    

Go to Quick Navigation
drop

On drop event.

Parameters:

  • sender - OrgChart JS object for which the event is fired
  • draggedNodeId - gragged node id
  • dropprdNodeId - dropped node id

Code example:

 
        var chart = new OrgChart(...);

        chart.on('drop', function (sender, draggedNodeId, droppedNodeId) {
            // your code goes here 
            // return false; to cancel the operation
        });

        chart.load(...); 
    

Go to Quick Navigation