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 controlis associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlwhich means that the following statements are equivalent:
oOrgChart.Options = {allowActions: "scroll"}where oOrgChart is an object of OrgChart type
oOrgChart.SetOptions({allowActions: "scroll"})
oOrgChart.AllowActions = "scroll"
oOrgChart.SetAllowActions("scroll")
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
client |
any | The client parameter indicates the control's client area as:
|
|
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
Members
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);
});
or
oOrgChart.on("click", function (oEvent)
{
console.log(oEvent);
});
where oOrgChart is an object of OrgChart type
Listeners
Root :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".
Root
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
Shortcuts
oCV :CV
Defines the view of the control as an object of CV type.
Type:
(static, readonly) SingleSelEnum :number
The OrgChart.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses.
Type:
- number
Properties:
Name | value | Type | Description |
---|---|---|---|
exDisableSel |
0 |
number | The exDisableSel value specifies that the control's selection is disabled. |
exEnableSel |
1 |
number | The exEnableSel flag specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set ). |
exSingleSel |
2 |
number | The exSingleSel flag specifies that the user can select a node only. |
exToggleSel |
4 |
number | The exToggleSel flag specifies that the node's selection state is toggled once the user clicks a node. |
exDisableCtrlSel |
8 |
number | The exDisableCtrlSel flag disables toggling the node's selection state when user clicks a node, while CTRL modifier key is pressed. |
exDisableShiftSel |
16 |
number | The exDisableShiftSel flag disables selecting nodes using the SHIFT key. |
exDisableDrag |
32 |
number | The exDisableDrag flag disables selecting nodes by drag. |
(static) type :string
The type field defines the full-name of the object (the constructor.name does not give the same name for minimized forms).
The OrgChart.type member always returns "OrgChart"
Type:
- string
- Since:
- 1.8
(static) version :string
The version field defines the version of the control.
The current version is 3.4
Type:
- string
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.
GetLayout(oOptsopt) → {string}
The GetLayout() method saves the UI layout of the object to an encoded string. The layout can be restored using the SetLayout() method. Currently, the control's Layout property serializes the following:
- layout of windows (size, dock, parent)
- selected nodes
- expand/collapse nodes
- control's zoom
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
oOpts |
object |
<optional> |
An object of {iMask,eMask,base64,equal,eol} type that defines options to serialize the properties of the container as explained bellow:
|
- Since:
- 1.8
Returns:
Returns a string that encodes the current UI layout for the entire object
- Type
- string
Example
The following statements are equivalents:
oOrgChart.GetLayout(), gets the control's layout
oOrgChart.Layout, gets the control's layout
where oOrgChart is an object of OrgChart type
GetLayout
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
SetLayout(layout, oOptsopt)
The SetLayout() method restores the UI layout of the object from an encoded string, previously returned by the GetLayout() method. Currently, the control's Layout property serializes the following:
- layout of windows (size, dock, parent)
- selected nodes
- expand/collapse nodes
- control's zoom
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
layout |
string | A string expression that defines the UI layout to apply | |
oOpts |
object |
<optional> |
An object of {iMask,eMask,base64,equal,eol} type that defines options to serialize the UI layout as explained bellow:
|
- Since:
- 1.8
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 |
init(client, oOptsopt)
The init() method initializes the object
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
client |
any | The client parameter indicates the control's client area as:
|
|
oOpts |
object |
<optional> |
An object of OrgChart.Options type that defines different options to display the control |
- Since:
- 1.8
off(event, listener, methodopt)
The off() method removes an event handler that was previously bound to an event, effectively stopping the listener from responding to that event.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
event |
string | Specifies the name of the event to unbind. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. | |
listener |
object | callback | Defines the listener to remove, which can either be: listener {object}, an object that implements a notification method (e.g., listener[method](oEvent) or listener[type](oEvent)) that was previously used to handle the event listener {callback}, a JavaScript callback function that was previously bound to the event (the method parameter has no effect) | |
method |
string |
<optional> |
Defines an optional case-sensitive string specifying the method on the listener to remove. If not provided, the listener[type]() function is used. This parameter is ignored when the listener is a JavaScript callback function. |
- Since:
- 4.4
Example
The following example removes the click event handler from the control:
oCV.off("click");
where oCV is an object of CV type.
This sample is equivalent to:
oCV.Listeners.Remove("onclick");
The following example removes all event handlers from the control:
oCV.off();
where oCV is an object of CV type.
This sample is equivalent to:
oCV.Listeners.Clear();
or
oCV.Listeners.Remove();
off
on(event, listener, methodopt) → {object}
The on() method binds a handler to a specified event, enabling you to listen for specific events and define corresponding actions.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
event |
string | Specifies the name of the event to listen for. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. | |
listener |
object | callback | Defines the listener, which can either be: listener {object}, an object that implements a notification method (e.g., listener[method](oEvent) or listener[type](oEvent)) to handle the event when it occurs listener {callback}, a JavaScript callback function to handle the event directly (the method parameter has not effect) | |
method |
string |
<optional> |
Defines an optional case-sensitive string specifying the method on the listener to handle the event. If not provided, the listener[type]() function is used. This parameter is ignored when the listener is a JavaScript callback function. |
- Since:
- 4.4
Returns:
Returns the listeners of the specified type, as an exontrol.Arr({callback, thisArg, lock, name, equal}) type, which includes the following new members:
- type {string}, specifies a case-sensitive string that specifies the type of event to listen for
- do(event) {callback}, indicates a function that can be invoked to trigger the specified event for all listeners registered for that event type
- callback {callback}, defines the listener's callback function
- thisArg {any}, defines the value of this during the listener's callback execution
- lock {number}, locks or unlocks the invocation of the listener's callback
- name {string}, defines the name of the callback, mostly used for debugging purposes
- equal(oCompareListenerCallback) {callback}, indicates a function of callback(oCompareListenerCallback) {boolean} type compares the current object with the provided object. It returns true if the objects contain the same data
- Type
- object
Example
The following example logs event details when the control is clicked:
oCV.on("click", function(oEvent)
{
console.log(oEvent);
});
where oCV is an object of CV type.
This sample is quivalent of
oCV.Listeners.Add("onclick", function (oEvent)
{
console.log(oEvent);
});
on