Class OrgChartBase

Options Methods Interfaces

Hierarchy

OrgChartBase
- OrgChart

Index

Constructors

constructor

Properties

icon

Methods Event Listeners

Methods Other

Constructors

constructor

new OrgChartBase(): OrgChartBase

Returns OrgChartBase

Properties

Static icon

icon: { add: any; csv: any; details: any; edit: any; excel: any; happy: any; link: any; pdf: any; png: any; redo: any; remove: any; sad: any; share: any; svg: any; undo: any; user: any; xml: any }

Type declaration

add:function
- add(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
csv:function
- csv(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
details:function
- details(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
edit:function
- edit(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
excel:function
- excel(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
happy:function
- happy(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
link:function
- link(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
pdf:function
- pdf(w: string | number, h: string | number, c: string): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string
  Returns string
png:function
- png(w: string | number, h: string | number, c: string): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string
  Returns string
redo:function
- redo(w: string | number, h: string | number, c: string | number, x?: string | number, y?: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  - Optional x: string | number
  - Optional y: string | number
  Returns string
remove:function
- remove(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
sad:function
- sad(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
share:function
- share(w: string | number, h: string | number, c: string | number, x?: string | number, y?: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  - Optional x: string | number
  - Optional y: string | number
  Returns string
svg:function
- svg(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string
undo:function
- undo(w: string | number, h: string | number, c: string | number, x?: string | number, y?: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  - Optional x: string | number
  - Optional y: string | number
  Returns string
user:function
- user(w: string | number, h: string | number, c: string | number, x?: string | number, y?: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  - Optional x: string | number
  - Optional y: string | number
  Returns string
xml:function
- xml(w: string | number, h: string | number, c: string | number): string
- Parameters
  - w: string | number
  - h: string | number
  - c: string | number
  Returns string

Event Listeners Methods

on

on(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", listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => boolean | void): OrgChart

The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *

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

onAddNode

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

Occurs when a node has been added by addNode method.
```
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

onDrag

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

The onDrag event occurs when a node is dragged. enableDragDrop option has to be turned on.
```
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

onDrop

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

The onDrop event occurs when a node is dropped. enableDragDrop option has to be turned on.
```
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

onRemoveNode

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

Occurs when a node has been removed by removeNode method.
```
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

onUpdateNode

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

Occurs when the node data has been updated by updateNode method.
```
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

onUpdated

onUpdated(): OrgChart

Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations. Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
```
var chart = new OrgChart('#tree', {});
chart.onUpdated(() => {
//Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
});
```
Returns OrgChart

Other Methods

canUpdateLink

canUpdateLink(id: string | number, pid: string | number): boolean

Can update link

Parameters
- id: string | number
  
  child id
- pid: string | number
  
  parent id
Returns boolean

removeListener

removeListener(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", listener?: () => void): boolean

Removes an event listener previously registered. The event listener to be removed is identified using a combination of the event type and the event listener function itself. Returns true if success and false if fail.

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 string which specifies the type of event for which to remove an event listener
- Optional listener: () => void
  
  The event listener function of the event handler to remove from the event target
  - - (): void
    - Returns void
Returns boolean

removeNode

removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void

Removes specified node from nodes collection, redraws the chart and fires remove event.

Parameters
- id: string | number
  
  identification number of the node
- Optional callback: () => void
  
  called at the end of animation
  - - (): void
    - Returns void
- Optional fireEvent: boolean
  
  indicates if the remove event will be called or not
Returns void

Generated using TypeDoc

Hierarchy

Index

Constructors

Properties

Methods Event Listeners

Methods Other

Constructors

constructor

Returns OrgChartBase

Properties

Static icon

Type declaration

add:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

csv:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

details:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

edit:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

excel:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

happy:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

link:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string

pdf:function

Parameters

w: string | number

h: string | number

c: string

Returns string

png:function

Parameters

w: string | number

h: string | number

c: string

Returns string

redo:function

Parameters

w: string | number

h: string | number

c: string | number

Optional x: string | number

Optional y: string | number

Returns string

remove:function

Parameters

w: string | number

h: string | number

c: string | number

Returns string