Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

Index

Constructors

Properties

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(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(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(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(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(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(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

      • 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(id: string | number, pid: string | number): boolean
      • Can update link

        Parameters

        • id: string | number

          child id

        • pid: string | number

          parent id

        Returns boolean

      • 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(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

      Legend

      • Constructor
      • Property
      • Method
      • Static property
      • Static method
      • Inherited method

      Settings

      Theme

      Generated using TypeDoc