Class OrgChart

let chart = new OrgChart('#tree', {});
chart.on('init', function () {
     // console.log("initiated")
})
chart.load(nodes);

Parameters

• type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout"

  A case-sensitive string representing the event type to listen for.

• listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => boolean | void

  The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.

  • • (sender: OrgChart, args?: any, args1?: any, args2?: any): boolean | void

    • Parameters

      • sender: OrgChart

      • Optional args: any

      • Optional args1: any

      • Optional args2: any

      Returns boolean | void

Returns OrgChart

var chart = new OrgChart('#tree', {});
chart.onAddNode((args) => {     
//return false; to cancel the operation
});

Parameters

• listener: (args: { data: object }) => void

  • • (args: { data: object }): void

    • Parameters

      • args: { data: object }

        • data: object

          new added data node

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onCanvasClick(() => {  
});
chart.load(nodes);

Parameters

• listener: (args: { event: any }) => void

  • • (args: { event: any }): void

    • Parameters

      • args: { event: any }

        • event: any

          the browser event

      Returns void

Returns OrgChart

var chart = new OrgChart('#tree', {});
chart.onDrag(() => {
//return false; to cancel the operation
});

Parameters

• listener: (args: { dragId: string | number; event: MouseEvent; nodeIds: (string | number)[] }) => void

  • • (args: { dragId: string | number; event: MouseEvent; nodeIds: (string | number)[] }): void

    • Parameters

      • args: { dragId: string | number; event: MouseEvent; nodeIds: (string | number)[] }

        • dragId: string | number

          dragged node id

        • event: MouseEvent

        • nodeIds: (string | number)[]

          array of node ids

          this property is initialized only if movable option is set

      Returns void

Returns OrgChart

var chart = new OrgChart('#tree', {});
chart.onDrop(() => {
//return false; to cancel the operation
});

Parameters

• listener: (args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number; event: MouseEvent }) => void

  • • (args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number; event: MouseEvent }): void

    • Parameters

      • args: { dragId: string | number; dragNodeElement: HTMLElement; dropId: string | number; event: MouseEvent }

        • dragId: string | number

          dragged node id

        • dragNodeElement: HTMLElement

          draging element

        • dropId: string | number

          dropped node id

        • event: MouseEvent

          Mouse event

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onExpandCollpaseButtonClick(() => {
 //return false; to cancel the operation
});
chart.load(nodes);

Parameters

• listener: (args: { collapsing: boolean; id: string | number; ids: (string | number)[] }) => void

  • • (args: { collapsing: boolean; id: string | number; ids: (string | number)[] }): void

    • Parameters

      • args: { collapsing: boolean; id: string | number; ids: (string | number)[] }

        • collapsing: boolean

          Indicates id the operation is collaps or expand

        • id: string | number

          the id of the clicked node

        • ids: (string | number)[]

          node ids that will be expanded or collapsed

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onExportEnd(() => {
//return false; to cancel the operation for example id you prefer the exported document to not download
});
chart.load(nodes);

Parameters

• listener: (args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }) => void

  • • (args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }): void

    • Parameters

      • args: { ArrayBuffer: ArrayBuffer; content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; styles: string }

        • ArrayBuffer: ArrayBuffer

          the array buffer is the exported document, you can save it on a server or send it via email

          this property is initialized only for PDF/PNG exports

        • content: string

          csv ot xml string

          this property is initialized only for CSV/XML/SVG exports

        • ext: string

          extension

          this property is initialized only for CSV/XML exports

        • filename: string

          filename, you can change the filename here

          this property is initialized only for CSV/XML exports

        • nodes: object[]

          an array of node objects

          this property is initialized only for CSV/XML exports

        • options: exportOptions

          export options

          this property is initialized only for SVG exports

        • styles: string

          add extra styles

          this property is initialized only for SVG exports

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onExportStart(() => {
args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
//return false; to cancel the operation
});
chart.load(nodes);

Parameters

• listener: (args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }) => void

  • • (args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }): void

    • Parameters

      • args: { content: string; ext: string; filename: string; nodes: object[]; options: exportOptions; pages: any; styles: string }

        • content: string

          the content to be exported

          this property is initialized only for PDF/PNG/SVG exports

        • ext: string

          extension

          this property is initialized only for CSV/XML

        • filename: string

          filename, you can change the filename here

          this property is initialized only for CSV/XML exports

        • nodes: object[]

          array of node objects

          this property is initialized only for CSV/XML exports

        • options: exportOptions

          export options

          this property is initialized only for PDF/PNG/SVG exports

        • pages: any

          an object that discribes pages to be exported

          this property is initialized only for PDF/PNG exports

        • styles: string

          add extra styles

          this property is initialized only for PDF/PNG/SVG exports

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onField((args) => {
    //return false; to cancel
});
chart.load(nodes);

Parameters

• listener: (args: { data: object; element: string; field: string; name: string; node: node; value: any }) => boolean | void

  • • (args: { data: object; element: string; field: string; name: string; node: node; value: any }): boolean | void

    • Parameters

      • args: { data: object; element: string; field: string; name: string; node: node; value: any }

        • data: object

          node data json object

        • element: string

          svg or html element of the filed, can be changed in the event

        • field: string

          field template name

        • name: string

          name of the field

        • node: node

          the node

        • value: any

          value of the filed, can be changed in the event

      Returns boolean | void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onInit(() => {
});
chart.load(nodes);

Parameters

• listener: () => void

  • • (): void

    • Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onNodeClick(() => {
//return false; to cancel the operation      
});
chart.load(nodes);

Parameters

• listener: (args: { event: any; node: node }) => void

  • • (args: { event: any; node: node }): void

    • Parameters

      • args: { event: any; node: node }

        • event: any

          the browser event

        • node: node

          node JSON object

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onNodeDoubleClick(() => {
 //return false; to cancel the operation 
});
chart.load(nodes);

Parameters

• listener: (args: { data: object }) => void

  • • (args: { data: object }): void

    • Parameters

      • args: { data: object }

        • data: object

          clicked node data

      Returns void

Returns OrgChart

let chart = new OrgChart('#tree', {});
chart.onRedraw(() => {
});
chart.load(nodes);

Parameters

• listener: () => void

  • • (): void

    • Returns void

Returns OrgChart

var chart = new OrgChart('#tree', {});
chart.onRemoveNode((args) => {
//return false; to cancel the operation
});

Parameters

• listener: (args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }) => void

  • • (args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }): void

    • Parameters

      • args: { id: string | number; newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} } }

        • id: string | number

          node id

        • newPidsAndStpidsForIds: { newPidsForIds: {}; newStpidsForIds: {} }

          parent ids and sub tree parents ids that needs to be updated on the server. For example if you remove a node that has children all chilren nodes will change their pid to the parent node id of the removed node.

          • newPidsForIds: {}

          • newStpidsForIds: {}

      Returns void

Returns OrgChart

var chart = new OrgChart('#tree', {});
chart.onUpdateNode((args) => {
//return false; to cancel the operation
});

Parameters

• listener: (args: { newData: object; oldData: object }) => void

  • • (args: { newData: object; oldData: object }): void

    • Parameters

      • args: { newData: object; oldData: object }

        • newData: object

          new node data

        • oldData: object

          old node data

      Returns void

Returns OrgChart

var chart = new OrgChart('#tree', {});
chart.onUpdated(() => {
//Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
});

Returns OrgChart

let chart = new OrgChart('#tree', {});
...
chart.add({ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager" })
chart.draw();

Parameters

• data: object

  node data

Returns OrgChart

let chart = new OrgChart('#tree', {});
...
chart.addClink(4, 0, 'text')
chart.draw();

Parameters

• from: string | number

  from node with id

• to: string | number

  to node with id

• Optional label: string

  link label

• Optional template: string

  link template, for example 'orange'

Returns OrgChart

let chart = new OrgChart('#tree', {});
...
chart.addNode({ id: 1, name: "Denny Curtis", title: "CEO" });

Parameters

• data: object

  node data

• Optional callback: () => void

  called at the end of animation

  • • (): void

    • Returns void

• Optional fireEvent: boolean

  indicates if the add event will be called or not

Returns void

let chart = new OrgChart('#tree', {});
...
chart.addSlink(4, 0, 'text')
chart.draw();

Parameters

• from: string | number

  from node with id

• to: string | number

  to node with id

• Optional label: string

  link label

• Optional template: string

  link template, for example 'orange'

Returns OrgChart

let chart = new OrgChart('#tree', {});
...
let canRemove = chart.canRemove(2);

Parameters

• id: string | number

  identification number of the node

Returns boolean

let canDropTheNode = chart.canUpdateLink(draggedNodeId, droppedNodeId));

Parameters

• id: string | number

  child id

• pid: string | number

  parent id

Returns boolean

let chart = new OrgChart('#tree', {});
...
chart.center(2);

Parameters

• nodeId: string | number

  the id of the node

• Optional options: null | { childrenState: any; horizontal: boolean; parentState: any; rippleId: string | number; vertical: boolean }

  parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false

• Optional callback: () => void

  called when the animation completes

  • • (): void

    • Returns void

Returns void

let chart = new OrgChart('#tree', {});
...
chart.changeRoots(1, [2]);

Parameters

• id: string | number

  id of a node that will not change is position, can be null

• roots: (string | number)[]

  roots id array in the required order

• Optional callback: () => void

  called after the roots are changed and animation completes

  • • (): void

    • Returns void

Returns void

let chart = new OrgChart('#tree', {});
...
chart.clearRedo();

Returns void

let chart = new OrgChart('#tree', {});
...
chart.clearUndo();

Returns void

let chart = new OrgChart('#tree', {});
...
chart.collapse(1, [2]);

Parameters

• id: string | number

  the id of the node that will not move

• ids: (string | number)[]

  node ids that will be collapsed

• Optional callback: () => void

  called after the animation completes

  • • (): void

    • Returns void

Returns void

let chart = new OrgChart('#tree', {});
...
chart.destroy();

Returns void

let chart = new OrgChart('#tree', {});
...
chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
chart.draw();

Parameters

• Optional action: action

  Action for example OrgChart.action.centerNode, default is OrgChart.action.update

• Optional actionParams: any

  parameters for the action

• Optional callback: () => void

  called when the animation completes

  • • (): void

    • Returns void

Returns void

let chart = new OrgChart('#tree', {});
...
chart.expand(1, [2]);

Parameters

• id: string | number

  the id of the node that will not move during the animation

• ids: (string | number)[] | "all"

  node ids that will be expanded

• Optional callback: () => void

  called after the animation completes

  • • (): void

    • Returns void

Returns void

let chart = new OrgChart('#tree', {});
...
chart.expandCollapse(1, [2], [3]);

Parameters

• id: string | number

  the id of the node that will not move

• expandIds: (string | number)[]

  expand all nodes with ids

• collapseIds: (string | number)[]

  collpase all nodes with ids

• Optional callback: () => void

  called after the animation completes

  • • (): void

    • Returns void

Returns void

let chart = new OrgChart('#tree', {});
...
chart.exportCSV();

Parameters

• Optional filename: string | exportCSVXMLJSONOptions

  The name of the exported file See doc...

Returns void