Class: OrgChart

OrgChart(client, oOptsopt)

new OrgChart(client, oOptsopt)

The ExOrgChart/JS component permits the totally automatic generation of organigrams. An organigram generally provides a clear picture of the hierarchical position of the various actors. The control shows a hierarchical display of nodes, each one having an HTML caption, pictures and icons aligned to any side of the node. Each node can have child-nodes, assistant-nodes or group-nodes. The ExOrgChart/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

Every option of the OrgChart.Options type has associated a property of the control. For instance, the option:

allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
is associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
which means that the following statements are equivalent:
oOrgChart.Options = {allowActions: "scroll"}
oOrgChart.SetOptions({allowActions: "scroll"})
oOrgChart.AllowActions = "scroll"
oOrgChart.SetAllowActions("scroll")
where oOrgChart is an object of OrgChart type
Parameters:
Name Type Attributes Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
oOpts object <optional>
An object of OrgChart.Options type that defines different options to display the control
Requires:
  • module:exontrol.commmon.min.js

Requires

  • module:exontrol.commmon.min.js

Classes

Options

Members

(static, readonly) SingleSelEnum :number

The OrgChart.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses.
Type:
  • number
Properties:
Name Type Description
exDisableSel number The exDisableSel value specifies that the control's selection is disabled.
exEnableSel number The exEnableSel flag specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set ).
exSingleSel number The exSingleSel flag specifies that the user can select a node only.
exToggleSel number The exToggleSel flag specifies that the node's selection state is toggled once the user clicks a node.
exDisableCtrlSel number The exDisableCtrlSel flag disables toggling the node's selection state when user clicks a node, while CTRL modifier key is pressed.
exDisableShiftSel number The exDisableShiftSel flag disables selecting nodes using the SHIFT key.
exDisableDrag number The exDisableDrag flag disables selecting nodes by drag.

(static) version :string

The version field defines the version of the control
Type:
  • string

Listeners :exontrol.Lts

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The Events section lists the events the component supports.
Type:
  • exontrol.Lts
Example
The following sample shows how you can get all events the component currently supports:

oOrgChart.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays information about the node being clicked:

oOrgChart.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
});

where oOrgChart is an object of OrgChart type

oCV :CV

Defines the view of the control as an object of CV type.
Type:

Root :CV.Node

The Root field defines the root node of the control, as an object of Node type. Use the AddChild(oNodeOptions) method to add a child node. The AddAssistant(oNodeOptions) method adds an assistant-node. The AddGroup(oNodeOptions) method adds a group-node. Use the Nodes / GetNodes() / SetNodes(value) method to assign nodes from a string-representation, to the current node.
Type:
Example
oOrgChart.Root.Nodes = "Root(1,2,3[g])" or Root.SetNodes("Root(1,2,3[g])"), adds two child-nodes 1, 2 and 3 as a group-node of the root.
oOrgChart.Root.AddChild({ caption: "Anita", image: "ana"}), adds a child of the root node, with the caption "Anita" which display the image with the key "ana".

Shortcuts :exontrol.Sts

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.
Type:
  • exontrol.Sts
Example
The following sample removes the selection (calls the RemoveSelection() method) once the user presses the Delete key:

oOrgChart.Shortcuts.Add( "Delete", oOrgChart.RemoveSelection, oOrgChart );

where oOrgChart is an object of OrgChart type

Methods

BeginUpdate()

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. You can use the Update() method to perform multiple changes at once.

EndUpdate()

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method.

GetStatistics() → {string}

The GetStatistics() method gives statistics data of objects being hold by the control
Returns:
Returns statistics data of objects being hold by the control such as
Size: 588x412
Zoom: 100%
Node: 37/99
Link: 78
Sel: 1
Type
string

Update(callback, thisArgopt)

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends.
Parameters:
Name Type Attributes Description
callback callback Indicates a callback to perform changes within the control
thisArg any <optional>
Specifies the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of OrgChart type