OrgChart class

The OrgChart.SingleSelEnum type defines the flags for the selection mode of the control. The singleSel field accepts an OR combination of these flags to specify the selection mode of the control. By default, the singleSel field is set to exEnableSel, which means that the user can select multiple nodes within the control. If you set the singleSel field to exSingleSel, the user can select only one node at a time. The onselchange event is fired when the control's selection changes. The Selection property defines the control's selection, which can be a node, an array of nodes, a node's key or identifier, or an array of node keys or identifiers.

Each SingleSelEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "single,toggle,ctrl,shift,drag" is equivalent to the numeric value 62, or to the combination of enumeration constants exSingleSel | exToggleSel | exDisableCtrlSel | exDisableShiftSel | exDisableDrag.

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code. The OrgChart.type member always returns "OrgChart"

console.log(exontrol.OrgChart.type); // logs "OrgChart"

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions. The current version is 5.3

console.log(exontrol.OrgChart.version); // displays the version of the control, for instance "5.2"

The Align property defines how assistant and child nodes are positioned relative to their parent node. It accepts a value from AlignEnum. For example, exAlignLeft aligns child and assistant nodes to the left, while exAlignCenter centers them horizontally. Setting the Align property helps control the chart's visual structure, making relationships between nodes easier to understand. The Node.Align property specifies the alignment of a specific node, which can override the chart's default alignment for that node and its descendants, allowing for customized layouts within the same chart. The Align property may have no effect when the layout is set to a tree layout (flowVerticalTree or flowHorizontalTree).

The exontrol.AlignEnum type supports the following values:

• exAlignLeft (0), aligns object to the left
• exAlignCenter (1), centers object horizontally in the rectangle
• exAlignRight (2), aligns object to the right

0 or exontrol.AlignEnum.exAlignLeft {number}, aligns the nodes to the top-left corner
2 or exontrol.AlignEnum.exAlignRight {number}, right aligns the node relative to its parent

The AllowActions property customizes the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.

The format of the property is:

"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."

where

• "action", defines the action to perform (as defined below)

  Action	Description	Flags
  "drag-drop"	Performs drag and drop of the node (the node can be dropped inside or outside of the control). The ExDrop(event, data) method of the target HTML element is invoked once the user drops the node. The event parameter contains information about the mouse/touch event. The data parameter contains information about the source-object that initiated the drag/drop operation as {object, source, client, shape}
  "fit"	Fits the drag-area into the control's client area
  "move"	Moves nodes to a new parent or position by drag (not available if the control is read-only)
  "scroll"	Scrolls the control's content by drag
  "select"	Selects nodes by drag
  "zoom"	Zooms the control's content at dragging-point

• "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
  • "Shift", indicates that the SHIFT key is pressed
  • "Ctrl" or "Control", indicates that the CTRL key is pressed
  • "Alt" or "Menu", indicates that the ALT key is pressed
  • "Meta" , indicates that the META key is pressed
  • "LButton", specifies that the mouse's left-button is pressed
  • "RButton", specifies that the mouse's right-button is pressed
  • "MButton", specifies that the mouse's middle/wheel-button is pressed
  • "Long", specifies that the action requires a "long" click/touch before run
  • "+", indicates AND between values

null {null}, indicates the control's default allowActions value
"" {string}, specifies that no operation is allowed once the user clicks or touches the control
"scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.

The Cursors property defines the mouse cursor to display when hovering over different parts of the control. This property determines the pointer appearance for specific areas, providing visual feedback for interactive regions of the control. The Node.Cursors property sets cursors for a specific node and its descendants, overriding the chart's default cursors. The Node.Cursor property sets the cursor for a single node, enabling fine-grained customization within the same chart.

The format of the property is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined bellow)

The "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"anchor" (hyperlink)	indicates the anchor-element (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
"drag-drop"	defines the cursor while the node is being dragged using the "drag-drop" action
"expand" (expand/collapse)	indicates node's expand/collapse glyphs
"node" (node)	indicates any node
"nodea" (assistant-node)	indicates assistant-nodes
"nodeg" (group-node)	indicates group-nodes
"select" (selection)	indicates selected nodes

"pointer(expand,node)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "node" or "expand" part of the control (expand/collapse glyphs)
"pointer(expand),crosshair(node)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers the "expand" part of the control (expand/collapse glyphs), and "crosshair" mouse cursor while it hovers any "node"

The EnsureOnExpand property specifies whether the control automatically scrolls to ensure that a node's descendants fit within the viewport. The ExpandOnDblClick property determines whether a node expands when the user double-clicks it. When EnsureOnExpand is true, expanding or collapsing a node will automatically scroll the control so all of the node's descendants are visible. This feature improves the user experience by preventing nodes from being hidden, allowing users to easily view and interact with all relevant nodes in the organizational chart.

false {boolean}, once a node is expanded or collapsed the control is not scrolled to ensure that the node's descendants fits it.
true {boolean}, once a node is expanded or collapsed the control is scrolled to ensure that the node's descendants fits it.

The ExpandGlyphSize property defines the size of a node's expand/collapse glyphs. The SingleExpandGlyphs property specifies whether a node displays a single expand/collapse glyph or multiple glyphs. The ShowExpandGlyphs property controls which types of nodes display these glyphs. The Node.Expand property determines whether a node is expanded or collapsed, and the glyphs provide a visual way for users to expand or collapse nodes in the organizational chart. By setting the ExpandGlyphSize property to a specific number, you can adjust the glyphs' size to make them more visible or subtle according to your design preferences. For example, setting ExpandGlyphSize to 24 displays the glyphs at 24 by 24 pixels, making them easier for users to interact with. To hide the expand/collapse glyphs completely, set the property to 0, and the control will not display any glyphs for expanding or collapsing nodes.

0 {number}, displays no node's expand/collapse glyphs
24 {number}, specifies a size of 24x24 to display the node's expand/collapse glyphs

The ExpandOnDblClick property determines whether a node expands when the user double-clicks it. When ExpandOnDblClick is true, users can quickly expand or collapse nodes by double-clicking, providing a convenient way to navigate the organizational chart. When false, double-clicking a node does not trigger expansion or collapse, and users must use the expand/collapse glyphs (if enabled) or other methods to change the node's state. The EnsureOnExpand property specifies whether the control automatically scrolls its content to ensure that a node's descendants fit within the viewport. The Node.Expand property indicates whether a specific node is expanded or collapsed.

false {boolean}, the node is not expanded or collapsed once the user double-clicks it.
true {boolean}, the node is expanded or collapsed once the user double-clicks it.

The Filter property filters the nodes based on the caption. The Filter property specifies a wildcard expression used to match a node's plain caption. It can be set to null or empty string (no filter) or to a pattern that determines which nodes are visible. Using wildcard expressions allows you to filter nodes based on their captions, making it easier to focus on specific parts of the organizational chart. The Show property specifies which types of nodes are displayed in the chart, filtering nodes by their type. When a filter is applied, only the nodes that match the filter pattern, along with their ancestors, are displayed. As a result, the root node is always visible.

The filter supports the following wild-characters:

• "*", matches zero or more characters. For instance "a*" indicates anything that starts with "a" or "A".
• "#", matches one digit (0-9). For instance "a##", indicates anything that starts with "a" or "A" followed by exactly two digits, such as "a12" but not "a1".
• "?", matches one character. For instance "a??", indicates anything that starts with "a" or "A" followed by exactly two characters, such as "abc" but not "ab".
• "[a-z]", matches any character within the giving range. For instance "[a]*" indicates anything that starts with "a", or "[a-z]*" anything that starts with a lowercase letter.
• " " (space character), separates the OR pattern-masks. For instance "a* *b", masks for anything that starts with "a" or "A" or ends with "b" or "B"

null {null} or "" {string}, no filter is applied
"s*" {string}, filter for nodes that starts with "s" or "S" (case insensitive)
"[s]*" {string}, filter for nodes that starts with "s" (case sensitive)
"*Stela* Evan" {string}, filter for nodes that contains "Stela" or with exactly caption "Evan"

The Flow property defines the arrangement of nodes within the control. It accepts a value from Layout.FlowEnum, which determines how nodes are organized in the organizational chart. For example, exFlowVertical arranges nodes vertically, while exFlowHorizontal arranges them horizontally. By setting the Flow property, you can control the chart's layout to best represent your data and make relationships between nodes easier to understand at a glance. The OrgChart.Margins property specifies the horizontal and vertical distance between nodes, as an object of {x, y, indent, border} type. The Node.Flow property specifies the flow of a specific node, which can override the chart's default flow for that node and its descendants, allowing for customized layouts within the same chart.

Currently, the Flow property can be set to any of the following values (either as a string or as a Layout.FlowEnum flag):

• exFlowVertical ("flowVertical"), indicates that any assistant or child-node goes down, while any group-node goes right
• exFlowHorizontal ("flowHorizontal"), indicates that any assistant or child-node goes right, while any group-node goes down
• exFlowVerticalTree ("flowVerticalTree"), indicates any assistant or child-node goes down and indented to right, while any group-node goes right
• exFlowHorizontalTree ("flowHorizontalTree"), indicates any assistant or child-node goes right and indented down, while any group-node goes down

"flowVertical" or Layout.FlowEnum.exFlowVertical {string}, indicates that any assistant or child-node goes down, while any group-node goes right
"flowVerticalTree" or Layout.FlowEnum.exFlowVerticalTree {string}, arranges the nodes as a tree

The Focus property defines the focus node of the control, and ensures that it is visible. The focus node is the root if no selection is available. If there are multiple selected nodes, the focus node is the first selected node. The Selection property holds the collection of selected nodes. The SelectAll method selects all nodes in the control, and the RemoveSelection method removes the entire selection.

The setter of the Focus property accepts any of the following values:

• {null}, specifies that the entire selection is removed/cleared, and the focus is set to the root node
• {string}, Specifies the node's key or caption
• {Node}, Indicates an object of Node that specifies the node itself

The getter of the Focus property returns the control's focus node (which is the root if no selection is available), as an object of Node type

null {null}, specifies that the entire selection is removed/cleared, and the focus is set to the root node
"key" {string}, specifies the key/identifier or plain-caption of the node to set focus to (root node is used if the node is not found)

The FormatText property defines the format used to display labels or captions on the control. It is a bitwise combination of flags that control text alignment, word-breaking, tab expansion, and other rendering options. For example, you can align text to the center, enable word-breaking for long captions, or display text on a single line. The available flags are defined in the exontrol.DrawTextFormatEnum type and can be combined to achieve the desired text formatting. The Node.FormatText property specifies the text formatting for a specific node, which can override the chart's default text formatting for that node.

The exontrol.DrawTextFormatEnum type support the following flags:

• exTextAlignTop (0x00), justifies the text to the top of the rectangle
• exTextAlignLeft (0x00), aligns text to the left
• exTextAlignCenter (0x01), centers text horizontally in the rectangle
• exTextAlignRight (0x02), aligns text to the right
• exTextAlignVCenter (0x04), centers text vertically
• exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
• exTextAlignMask (0x0F), specifies the mask for text's alignment.
• exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
• exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
• exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
• exPlainText (0x80), treats the text as plain text.
• exTextNoClip (0x0100), draws without clipping.
• exHTMLTextNoColors (0x0200), ignores the and tags.
• exTextCalcRect (0x0400), determines the width and height of the text.
• exHTMLTextNoTags (0x0800), ignores all HTML tags.
• exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
• exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
• exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.

null {null}, centers the caption
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned

The ImageAlign property defines the alignment of a node's image, while the ImageSize property defines the dimensions of the image. These properties work together to control how the image is displayed within the node. The ImageSize property specifies the image's size, and the ImageAlign property determines its position relative to the node's caption. Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the ImageAlign property does not affect images inserted with the <img> tag. The Node.ImageAlign property specifies the alignment of the image for a specific node. It can override the chart's default image alignment for that node, allowing for customized image alignment within the same chart.

The alignment of the image within the node is determined by the ImageAlign property, which can take the following values:

• 0, the image is on the left of the node's caption (default)
• 1, the image is on the right of the node's caption
• 2, the image is on the top of the node's caption
• 3, the image is on the bottom of the node's caption

null {null}, the image is on top of the node's cation (default value)
1 {number}, the image is displayed to the left of the node's caption

The ImageSize property defines the size of the node's image, and the ImageAlign property defines its alignment within the node. Together, they control how the image is displayed relative to the caption. ImageSize sets the image dimensions, while ImageAlign determines its position in relation to the caption. For captions or labels that support ex-HTML formatting, images can be included using the ex-HTML tag; however, ImageSize does not affect these images. The tag supports a size attribute to specify the image's dimensions, for example: apple:182002 sets the image named "apple" to size 18. The Node.ImageSize property specifies the size of the image for a specific node. It can override the chart's default image size for that node, allowing for customized image sizes within the same chart.

The proeprty supports the following values:

• {null}, Indicates that the node's image is displayed as it is (full-sized).
• {number}, Specifies that the node's image is displayed into a square of giving size (same width and height). If 0 the node displays no image, if negative the node's image is stretched to giving square, else the node's picture is scaled to fit the giving rectangle.
• {number[]}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the node's picture to scale or stretch to.

null {null}, Indicates that the node's image is displayed as it is (full-sized).
0 {number}, no image is displayed
64 {number}, the image is scaled to fit a 64 x 64 rectangle
-64 {number}, the image is strected to a 64 x 64 rectangle
[32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
[-32,-64] {array}, stretches the image to a 32 x 64 rectangle

The Layout property defines the control's layout as a string that encodes the current UI configuration of the entire object. The encoded layout includes information such as the position, size, and state of the control's windows, as well as selected nodes and other interface settings. The Layout property can be used to save and restore the control's UI layout. When used as a getter, it returns a string that encodes the current UI layout, which can be stored or transmitted as needed. When used as a setter, the Layout property accepts an encoded layout string and restores the UI layout from it, allowing you to recreate a previously saved configuration of the control's interface.

Currently, the control's Layout property serializes the following:

• layout of windows (size, dock, parent)
• selected nodes
• expand/collapse nodes
• control's zoom

The following statements are equivalents:

 oOrgChart.SetLayout(layout), restores the control's layout from the giving layout string
 oOrgChart.Layout = layout, restores the control's layout from the giving layout string

where oOrgChart is an object of OrgChart type and layout is a string expression that defines the UI layout to apply

The Link property defines the attributes of the link between a node and its descendant nodes. The Link property is defined as an object with {type, dir, width, color, arrow, arrowSize, arrowShape, style}. By default, Link is null, which is equivalent to {color: 'rgba(0,0,0,0.5)', arrow: 'rgb(128,128,128)'}, meaning links are displayed with a semi-transparent black line and gray arrows. The ShowLinks property determines whether the control displays or hides links between nodes. The Linka property specifies the attributes of links between a node and its assistant nodes, and the Linkg property specifies the attributes of links between a node and its group nodes. The Node.Link property sets the link attributes for a specific node and its descendant nodes. It overrides the chart's default link attributes for that node and its descendants, enabling customized link styles within the same chart.

null {null}, specifies the default link attributes, which is {color: 'rgba(0,0,0,0.5)', arrow: 'rgb(128,128,128)'}
{color: 'red'} {object}, shows the links and the arrows in red color, while the width is the default 1 pixel

The Linka property defines the attributes of the link between a node and its assistant nodes. The Linka property is defined as an object with {type, dir, width, color, arrow, arrowSize, arrowShape, style}. By default, LinkA is null, which is equivalent to {color: 'rgba(0,0,0,0.25)', arrow: 'rgb(192,192,192)', style: [2]}. This means links between a node and its assistant nodes are displayed with a lighter semi-transparent black line, gray arrows, and a dashed style. The ShowLinks property determines whether the control displays or hides links between nodes. The Link property specifies the attributes of links between a node and its descendant nodes, and the Linkg property specifies the attributes of links between a node and its group nodes. The Node.Linka property sets the link attributes for a specific node and its assistant nodes. It overrides the chart's default link attributes for that node and its assistant nodes, enabling customized link styles within the same chart.

null {null}, specifies the default link attributes, which is {color: 'rgba(0,0,0,0.25)', arrow: 'rgb(192,192,192)', style: [2]}
{color: 'lime'} {object}, shows the links between a node and its assistant nodes in lime color, while the width is the default 1 pixel and the arrows are the default gray color

The Linkg property defines the attributes of the link between a node and its group nodes. The Linkg property is defined as an object with {type, dir, width, color, arrow, arrowSize, arrowShape, style}. By default, LinkG is null, which is equivalent to {type: 3, color: 'rgba(0,0,0,0.125)', arrow: 'rgb(224,224,224)', style: [2]}. This means links between a node and its group nodes are displayed with a very light semi-transparent black line, gray arrows, and a dashed style. The ShowLinks property determines whether the control displays or hides links between nodes. The Link property specifies the attributes of links between a node and its descendant nodes, and the Linka property specifies the attributes of links between a node and its assistant nodes. The Node.Linkg property sets the link attributes for a specific node and its group nodes. It overrides the chart's default link attributes for that node and its group nodes, allowing customized link styles within the same chart.

null {null}, specifies the default link attributes, which is {type: 3, color: 'rgba(0,0,0,0.125)', arrow: 'rgb(224,224,224)', style: [2]}
{color: 'black'} {object}, shows the links between a node and its group nodes in black color, while the width is the default 1 pixel and the arrows are the default gray color

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 on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.

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

The Locked property locks or unlocks the control. When Locked is set to true, users cannot select any nodes, preventing interaction and accidental changes, which is ideal for displaying a static organizational chart. When Locked is false, users can select nodes to view details or perform actions. Unlike the ReadOnly property, which prevents hierarchy changes (the AllowActions property includes the "move" action, allowing users to drag and drop nodes between parents) but still permits node selection, Locked disables both selection and modification, ensuring the chart remains fully unaltered. By default, the Locked property is set to false, allowing users to interact with the organizational chart.

false {boolean}, unlocks the control (can select any node)
true {boolean}, locks the control (can't select any node)

The Margins property defines the horizontal and vertical distance between nodes, defined as an object of {x, y, indent, border} type. This property controls the spacing between nodes in the organizational chart, enhancing readability and visual appeal. By adjusting the Margins property, you can create a more spacious or more compact layout depending on your design preferences and the amount of information displayed. The Flow property defines the arrangement of nodes, while the Margins property allows you to fine-tune the spacing between them for better clarity and structure. The Node.Margins property specifies the margins of a specific node, which can override the chart's default margins for that node and its descendants, enabling customized spacing within the same chart.

The Margins property is an object that can have the following properties:

• x {number}, specifies the horizontal distance between nodes
• y {number}, specifies the vertical distance between nodes
• indent {number}, specifies the horizontal distance between a child node and its parent node
• border {number}, specifies the distance between the control's border and the nodes

By default, the Margins property is null, which means that the control uses its own default margins as {x: 16, y: 16, indent: 16, border: 8}. You can customize these margins by setting the margins field to an object with specific values for x, y, indent, and border. For example, setting margins to {x: 20, y: 20, indent: 30, border: 10} will increase the spacing between nodes and the distance from the control's border, creating a more spacious layout for the organizational chart.

null {null}, the control uses its own default margins as {x: 16, y: 16, indent: 16, border: 8}
{x: 0, y: 0, indent: 0, border: 0} {object}, specifies no distance between nodes and no distance between the control's border and the nodes

The Nodes property defines the control's hierarchy using a string representation. For example, the string "Root(A,B(1,2),C)" creates a root node named "Root" with three child nodes: "A", "B", and "C". Node "B" contains two child nodes, "1" and "2". This format provides a concise and intuitive way to define the organizational chart structure, making it easier to visualize and manage complex hierarchies. By using this representation, you can quickly configure and modify the chart without manually creating nodes and relationships in code. The Node.Nodes property sets the child nodes for a specific node using the same string format, ensuring consistent and efficient hierarchy management. Additionally, the AddChild, AddAssistant, and AddGroup methods of the Node object allow you to add child, assistant, and group nodes to a specific node. The Node.Remove method removes a node from the chart along with all its descendants.

The format of the property is (everything between () refers to children, and everything between [] refers to flags):

"Root(item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]))"

The string representation supports the following flags:

• [a], indicates a node of assistant-type
• [g], indicates a node of group-type
• [vert], [horz], [tree] or [htree], defines the node's flow and arrangement as vertical, horizontal, tree or horizontal tree
• [c], indicates that the child of the node are collapsed
• [ca], indicates that the child of assistant-type are collapsed
• [cg], indicates that the child of group-type are collapsed
• [dis], specifies that the node is disabled
• [nsel], specifies that the user can't select the node
• [id={value}], specifies the node's key/identifier. The {value} specifies the key of the node [id=home]
• [img={value}], indicates the image of the node. The {value} indicates the name of an exontrol.HP, such as [img=logo]. The image can be added using the exontrol.HTMLPicture.Add method
• [shape={value}], specifies the node's appearance. The {value} indicates the name of the shape to be applied on the node itself [shape=nodeBlue]
• [cursor={value}], indicates the mouse cursor for the node itself. The {value} indicates the mouse cursor to show once the cursor hovers the node itself [cursor=pointer]

"" {string}, clears the nodes collection
"Root(1,2,3[g])" {string}, adds two child-nodes 1, 2 and 3 as a group-node of the root
"xxx([img=Stela],[img=Al],[img=Peggy](A1[a],A2[a]))" {string}, renames the root's node to "xxx", with a three-child nodes with images "Stela", "Al" and "Peggy", and "Peggy" has two-assistant nodes "A1" and "A2"

The Options property applies the provided options to the control, allowing you to configure its behavior and appearance. The OrgChart.Options type represents a collection of configurable settings that define how the control looks and behaves. By using SetOptions(), you can programmatically update one or more of these settings at runtime, providing a flexible and convenient way to modify the control's configuration without directly altering each individual property. This method is particularly useful when you need to change multiple options at once or adjust the control dynamically based on user actions or application logic.

It is important to note that changing a field of the Options object does not automatically update the control. For example, oOrgChart.Options.nodes = "Root(C1,C2,C3)" does not apply the change. Instead, you must assign the Options property again, such as oOrgChart.Options = {nodes: "Root(C1,C2,C3)"}, so the control updates and applies the new value.

{nodes: "Root(C1,C2,C3)"}, applies the new hierarchy to the control, where Root is the root node, and C1, C2 and C3 are its child-nodes
{flow: exontrol.OrgChart.Layout.FlowEnum.exFlowVerticalTree}, changes the control's flow to vertical tree layout

The Pad property defines a node's padding, which is the space between the node's content and its border. This property helps control spacing within each node, allowing you to create a more visually appealing layout by adjusting the distance between the node's content (such as text or images) and its border. The Node.Pad property specifies the padding for a specific node. It can override the chart's default padding for that node and its descendants, enabling customized padding within the same chart.

The value of Pad property can be any of the following:

• {number} a numeric value, to pad horizontal and vertical size with the same value,
• {string|number[]} a "x,y" or [x,y] type to specify the padding on h/v size

null {null}, indicates that the default padding value of [4,4] is applied
0 {number}, indicates no padding
"8,4" {string}, increases the node's width with 2 * 8-pixels and node's height with 2 * 4-pixels
[8,4] {array}, increases the node's width with 2 * 8-pixels and node's height with 2 * 4-pixels

The ReadOnly property specifies whether the control is read-only, which allows users to select nodes but prevents them from modifying the hierarchy (the AllowActions property includes the "move" action, which normally allows users to drag and drop nodes between parents). When ReadOnly is set to false, users can both select nodes and modify the hierarchy. The Locked property disables both selection and modification, while ReadOnly allows selection but prevents hierarchy changes, offering a more flexible way to control user interaction with the organizational chart. By default, the ReadOnly property is set to false, allowing users to interact with the chart and make hierarchy changes as needed.

false {boolean}, the control's drop down is available and the user can select new items
true {boolean}, the control's drop down is available but the user can't select items

The Root field defines the control's root node, as a Node object. The control supports a single root node, which is the ancestor of all other nodes. It is created automatically when the control is initialized and cannot be removed. You can customize the root node (caption, image, shape, etc.) and build the hierarchy by adding nodes to it. Use Node.AddChild() to add child nodes, Node.AddAssistant() to add assistant nodes, and Node.AddGroup() to add group nodes. You can also use the Nodes or Node.Nodes property to replace the root's or a node's child nodes using a string representation.

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"

The ScrollBars property determines which scroll bars the control displays. It accepts one or more ScrollBarsEnum flags combined with OR. By default, ScrollBars is set to exBoth, showing both horizontal and vertical scroll bars when the content exceeds the control's client area. Scroll bars are automatically hidden when not needed, unless the ScrollBars property includes exDisableNoHorizontal, exDisableNoVertical, or exDisableBoth flags. The onscroll event is fired whenever the user scrolls the control's content.

The ScrollBars property uses the exontrol.ScrollBarsEnum enumeration as explained:

• exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
• exHorizontal (1), specifies that only the horizontal scroll bar is shown
• exVertical (2), specifies that only the vertical scroll bar is shown
• exBoth (3), specifies that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area
• exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown; it is disabled if it is unnecessary
• exDisableNoVertical (10), specifies that the vertical scroll bar is always shown; it is disabled if it is unnecessary
• exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown; they are disabled if they are unnecessary
• exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar
• exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar
• exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the scroll bar
• exHScrollEmptySpace (0x400), allows empty space when the control's content is horizontally scrolled to the end
• exVScrollEmptySpace (0x800), allows empty space when the control's content is vertically scrolled to the end
• exScrollEmptySpace (0xC00), allows empty space when the control's content is scrolled to the end
• exExtendSBS (0x3000), specifies that the control's scroll bars are visible only when the cursor hovers the window; the control's client area is extended over the scroll bar portion
• exMinSBS (0xC000), specifies that the control's scroll bars are shown as minimized
• exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)

exontrol.ScrollBarsEnum.exBoth or 3 {number}, specifies that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area
exontrol.ScrollBarsEnum.exNoScroll or 0 {number}, specifies that no scroll bars are shown (scroll is not allowed)

The ScrollBarsRoot property defines the color used to highlight the root node's position on the control's scroll bars. It can be set to a CSS color or null. Setting it to null disables the root position highlight. Highlighting the root node on the scroll bars helps users quickly identify its location within the overall content. By assigning a specific CSS color to the ScrollBarsRoot property, you can customize this highlight for better visual distinction. If you prefer not to display the root's position, set the property to null, and the control will show no indication on the scroll bars. The ScrollBars property must be enabled for this feature to take effect.

null {null}, hides the position of the root on the control's scroll bar
"black" {string}, shows the position of the root on the control's scroll bar in black

The Selection property defines the control's selection. It can be a node, an array of nodes, a node's key or identifier, or an array of node keys or identifiers. Users can select nodes by clicking or dragging when the "select" action is enabled in the AllowActions property. The Node.Selectable property specifies whether a specific node can be selected by the user. Setting the Selection property programmatically allows you to control which nodes are selected based on your application's logic or user interactions. For example, you can select a node when a user clicks a button or when certain conditions are met. The onselchange event is triggered whenever the selection changes, allowing you to respond by updating other parts of the UI or displaying additional information about the selected nodes. The SelectAll() method selects all elements within the control. The UnselectAll() method clears the control's selection. The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area. The RemoveSelection() method deletes selected-nodes (including all descendants).

The setter of the Selection property accepts the following values:

• value {null}, null specifies that the entire selection is removed/cleared
• value {string}, specifies the key/identifier or plain-caption of the node
• value {Node}, specifies an object of Node type
• value {array}, specifies an array of [Node], [string], [string | Node] type

The getter of the Selection property returns null, a Node type or an array of [Node] type that specifies the list of nodes being selected within the control

null {null}, removes the control's selection
"key" {string}, select the node with the specified key
oOrgChart.Root {exontrol.OrgChart.Node}, selects the root node

The Shapes property defines the shapes used by different parts of the control. This property allows customization of the visual appearance of elements such as expand/collapse glyphs, selection frames, and more, enabling a unique organizational chart design. The Node.Shapes property sets shapes for a specific node and its descendants, overriding the chart's default shapes. The Node.Shape property sets the shape for a single node, also overriding the default for that node and its descendants, allowing fine-grained customization within the same chart.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes.OrgChart object (while it starts with a lowercase letter, such as dfnode which refers to exontrol.Shapes.OrgChart.dfnode shape)
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  

• "part", defines the name of the part the shape is applied on (as defined bellow)

The shapes property supports any of the following parts:

Part	Description
"expand"	specifies the visual appearance for expand/collapse glyphs
"frameDrag"	specifies the visual appearance to display a frame while dragging the nodes
"frameFit"	defines the visual-appearance to display the frame while fitting nodes into the control's client area by drag
"frameSel"	defines the visual appearance to display a frame while selecting nodes by drag
"multiSel"	specifies the visual appearance to show the count of multiple-selected items
"node" (node)	defines the visual appearance for any node
"nodea" (assistant-node)	defines the visual appearance for assistant-nodes
"nodeg" (group-node)	defines the visual appearance for group-nodes
"select" (selection)	defines the visual appearance for selected nodes

null {null}, specifies the default visual appearance
"" {string}, no shape (no visual appearance is applied to any part of the control)
"red(node)", "#FF0000(node)", "rgb(255,0,0)(node)", "rgba(255,0,0,1)(node)" {string}, shows all-nodes in red
'{"hover":{"frameColor":"black","pad":-0.5}}(node)' {string}, draws a black-frame arround the node being hovered
"xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.OrgChart.xxx combined with exontrol.Shapes.OrgChart.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.OrgChart.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.OrgChart.zzz object defines the visual appearance of "y" part of the control

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. 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.

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

The Show property defines the types of nodes the chart displays, effectively filtering nodes by type. It can be set to null or empty string (no filter) or a combination of one or more NodeTypeEnum flags that define which node types are visible. By setting the Show property, you can control which nodes appear in the organizational chart, allowing you to focus on specific relationships or roles within the hierarchy. For example, setting Show to exNodeChild will display only child nodes. The Node.Show property specifies which types of nodes a specific node displays for its descendants. This property can override the chart's default settings for that node and its descendants, enabling customized filtering of node types within the same chart. The Filter property specifies a wildcard expression used to match a node's plain caption, providing additional filtering based on text.

The NodeTypeEnum defines the following flags (type of nodes):

• exNodeChild (1), specifies a node of child-type
• exNodeAssistant (2), specifies a node of assistant-type
• exNodeGroup (4), specifies a node of group-type

null {null}, no filter by type is applied
0 {number}, displays the control's root only with no child, assistant or group nodes
1 or exontrol.OrgChart.NodeTypeEnum.exNodeChild {number}, displays the child nodes only (no assistant or group nodes)

The ShowExpandGlyphs property shows or hides the expand/collapse glyphs is shown for different type of nodes. It accepts a combination of NodeTypeEnum flags to determine which node types show the glyphs. The SingleExpandGlyphs property specifies whether a node displays a single or multiple glyphs, and the ExpandGlyphSize property sets the size of these glyphs. A node displays expand/collapse glyphs based on its descendants: assistants to the left, groups to the right, and children below. Each glyph is shown only if the corresponding type of descendant exists. Configuring the ShowExpandGlyphs property allows you to customize the user interface to indicate which nodes can be expanded or collapsed, improving the user experience when navigating the organizational chart. For example, setting ShowExpandGlyphs to exNodeChild | exNodeAssistant will display glyphs only for child and assistant nodes, while group nodes will not show any. The Node.ShowExpandGlyphs property specifies which types of nodes display expand/collapse glyphs for a specific node. This property can override the chart's default settings for that node and its descendants, enabling customized display of glyphs within the same chart.

The NodeTypeEnum defines the following flags (type of nodes):

• exNodeChild (1), specifies a node of child-type
• exNodeAssistant (2), specifies a node of assistant-type
• exNodeGroup (4), specifies a node of group-type

null {null}, the expand/collapse glyphs are displayed for any type of nodes: child, assistant or group
0 {number}, no expand/collapse glyphs are displayed for any type of nodes: child, assistant or group
1 or exontrol.OrgChart.NodeTypeEnum.exNodeChild {number}, shows the expand/collapse glyphs nodes of child type only

The ShowLinks property determines whether the control displays or hides the links between nodes. The Link property specifies the attributes of links between a node and its descendant nodes. The Linka property specifies the attributes of links between a node and its assistant nodes. The Linkg property specifies the attributes of links between a node and its group nodes.

The exontrol.ShowLinksEnum type supports the following flags:

• exHide (0), specifies that no links are visible
• exExtended (0x01) specifies that links are shown as extended. This means the control automatically arranges both the start and end points of the links so they do not overlap. For example, if multiple links start from or end at the same element, the control ensures that each link uses a different start or end point instead of all sharing the same position. This helps keep the connections visually separated and easier to distinguish.
• exShow (0x02), specifies that links are visible (the links are always shown while not exHide)
• exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background)
• exCrossRect (0x20) specifies that links are shown with rectangular cross-links. When two links intersect, the control displays the crossing using a rectangular bridge so one link appears to pass over the other without merging. This makes intersections easier to read and helps visually distinguish overlapping links.
• exCrossTriangle (0x20) specifies that links are shown with triangular cross-links. When two links intersect, the control displays the crossing using a triangular marker so one link appears to pass over the other without merging. This helps clearly indicate link intersections and improves the readability of overlapping connections.
• exCrossMixt (0x60) specifies that links are shown using mixed cross-links. When two links intersect, the control displays the crossing using a combination of cross-link styles (such as rectangular or triangular bridges) so one link appears to pass over the other without merging. This mixed representation helps visually distinguish intersections and improves the readability of overlapping links.

0 or exontrol.ShowLinksEnum.exHide {number}, hides the links
1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background)
33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links

The SingleExpandGlyphs property shows one or more expand/collapse glyphs for the nodes. When set to true, any node with children shows a single glyph regardless of type. When false, child, assistant, and group nodes display separate glyphs according to the ShowExpandGlyphs settings. The ShowExpandGlyphs property controls which types of nodes display glyphs, and the ExpandGlyphSize property sets their size. The Node.SingleExpandGlyphs property specifies whether a specific node shows a single or multiple expand/collapse glyphs. This property can override the chart's default settings for that node and its descendants, enabling customized display of glyphs within the same chart.

false {boolean}, the node displays expand/collapse glyphs for each type of node the current node has (child, assistant or group)
true {boolean}, the node displays a single expand/collapse glyphs for any type of node the current node has (child, assistant or group)

The SingleSel property enables or disables single-selection, multiple-selection, toggle selection and other selection modes for the control. The selection mode of the control is determined by the SingleSel property, which can be set to enable single-selection, multiple-selection, or toggle selection. When single-selection is enabled, only one node can be selected at a time. When multiple-selection is enabled, users can select multiple nodes simultaneously. When toggle selection is enabled, clicking on an node toggles its selection state (selected/unselected). The Selection property specifies the currently selected nodes in the control as a list. The selection behavior can be further customized using additional flags that control how users can select nodes, such as disabling selection with modifier keys or by dragging.

The OrgChart.SingleSelEnum type defines the following flags:

• exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags)
• exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set )
• exSingleSel(2), specifies that the user can select a node only
• exToggleSel(4), specifies that the node's selection state is toggled once the user clicks a node.
• exDisableCtrlSel(8), disables toggling the node's selection state when user clicks a node, while CTRL modifier key is pressed.
• exDisableShiftSel(16), disables selecting nodes using the SHIFT key.
• exDisableDrag(32), disables selecting nodes by drag.

0 or OrgChart.SingleSelEnum.exDisableSel {number}, disables selecting any node
3 or OrgChart.SingleSelEnum.exSingleSel | OrgChart.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single node can be selected
6 or OrgChart.SingleSelEnum.exToggleSel | OrgChart.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a node is selected it gets unselected once it is clicked, or reverse, and only a single-node can be selected at once.

The Size property defines the dimensions or limits for displaying a node's caption. This property controls how the caption is rendered within the node, ensuring that it fits within a specified area and helping maintain a consistent and organized appearance in the organizational chart. The Node.Size property specifies the caption size for a specific node. It can override the chart's default caption size for that node, allowing customized caption sizes within the same chart.

The value of the Size property can be defined as follows:

• {null}, Indicates that no limit for the node's caption
• {number}, Specifies that the node's caption is displayed into a square of giving size (same width and height ). If 0 the node displays no caption
• {number[]}, Specifies an array of [min-width,min-height,max-width,max-height] type that defines the limits for width or/and height of the measured caption. The min-width,min-height,max-width,max-height can be null which indicates that the limit is ignored, or a positive number that specifies the limit (min or max)

null {null}, the node's caption is displayed with no limits
0 {number}, the node's caption is hidden
64 {number}, the node's caption is always displayed into a 64x64 square
[null, null, 128, null] {array}, limits the node's width up to 128 pixels
[128, null, 128, null] {array}, indicates that node's width is always 128 pixels
[128, null, null, null] {array}, indicates that node's minimum width is 128 pixels
[32, 18, 128, 64] {array}, indicates that node's width varies between 32 and 128 pixels, while the node's height varies between 18 and 64 pixels

The Smooth property defines the duration in milliseconds for the control to transition from one layout to another. Setting Smooth to 0 disables smooth transitions, causing the layout to change immediately. Setting it to 125 applies a smooth transition lasting 125 milliseconds.

0 {number}, no smooth changes once the control goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

The Statistics property gives statistics data of objects being hold by the control. The statistics data includes the control's size, zoom level, number of nodes and links, and the number of selected nodes. This method is useful for debugging purposes or to get insights about the current state of the control.

The property returns a string like the following:

Size: 588x412
Zoom: 100%
Node: 37/99
Link: 78
Sel: 1

The following statements are equivalents:

 oOrgChart.GetStatistics(), gets the control's statistics
 oOrgChart.Statistics, gets the control's statistics

where oOrgChart is an object of OrgChart type

The Tfi property defines the font attributes for the control's captions, allowing precise customization of their appearance by specifying the text style (such as bold or italic), font family, and font size, either as a string (e.g., "b monospace 16") or as an object (e.g., {bold: true, italic: false, fontName: "monospace", fontSize: 16}), and immediately applies these settings to update the displayed captions.

The value as {string} supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string value that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The value as {object} supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The WheelChange property defines the amount the calendar scrolls when the user rolls the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

0 {number}, locks any action the mouse's wheel performs
18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)

The Zoom property defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from.

null {null}, Specifies normal-view (100%)
150 {number}, Indicates that the control's label is magnfied to 150%

The ZoomLevels property defines the allowed zoom levels for the control and can be specified as a comma-separated string of numeric values (e.g., "50,100,150,200"). These values represent the percentage levels at which users can zoom in or out of the control's content. The ZoomLevels property works together with the Zoom property to provide a range of zoom options. For example, if ZoomLevels is set to "50,100,150,200", users can choose from these predefined zoom levels to adjust their view of the content.

null {null}, Specifies that the control's zoom factor is always 100%
150 {number}, Specifies that the control's zoom factor is always 150%
"50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the margins of zoom-factor is 50% to 350%

The oCV member defines the view of the control as an object of type CV. The CV object is responsible for rendering the organizational chart and handling user interactions within the controls client area. It acts as the main interface for managing the visual representation of the chart, including drawing nodes, links, and processing events such as clicks and drag operations. The CV object is created during the initialization of the OrgChart control and is associated with it to ensure proper communication between the controls logic and its visual layer. Nearly all methods of the oCV object are forwarded to the owning control (OrgChart), providing seamless integration between functionality and visual representation.

The following statements are equivalent:

 oOrgChart.oCV.SetNodes("Root(C1,C2,C3)")
 oOrgChart.SetNodes("Root(C1,C2,C3)")

where oOrgChart is an instance of OrgChart type

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. The BeginUpdate() method is mostly used when you want to perform multiple changes to the control without refreshing the control after each change, and once all changes are performed, you can call the EndUpdate() method to refresh the control. You can use the Update() method to perform multiple changes at once. The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oOrgChart.BeginUpdate();
  // performs multiple changes to the control
oOrgChart.EndUpdate();

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method. The EndUpdate() method is mostly used after calling the BeginUpdate() method, to refresh the control after performing multiple changes to the control. You can use the Update() method to perform multiple changes at once. The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oOrgChart.BeginUpdate();
 // performs multiple changes to the control
oOrgChart.EndUpdate();

The EnsureVisibleClient() method ensures that the giving client fits the control's client area. The EnsureVisibleSelection() method is an alias of EnsureVisibleClient and ensures that the specified selection fits within the control's client area. The EnsureVisibleClient() method can adjust the control's scale or zoom factor to fully fit the client if the allowScale option is set to true. Additionally, if the nearestFit option is set to true, it ensures that the corner of the object nearest to the window's client area is visible; this option only applies when the object's size is larger than the window's client area.

oOrgChart.EnsureVisibleClient( oOrgChart.Node("ley") ), ensures that the node with key "ley" fits the control's client area

The EnsureVisibleNode() method ensures that a given node is visible within the control by expanding all its parent nodes. The EnsureVisibleSelection() method scrolls the control to make the current selection fit within the client area. The Node property retrieves a node by its key, while the Root property returns the root node.

oOrgChart.EnsureVisibleNode( "ley" ), ensures that the node with key "ley" fits the control's client area

The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area. The Selection property defines the current selection and can be a node, an array of nodes, a node's key/identifier, or an array of node keys/identifiers. Users can select nodes by clicking or dragging when the "select" action is enabled in the AllowActions property, while Node.Selectable determines whether a node can be selected. You can also set the Selection property programmatically to control selection based on your application logic or user interactions, and the onselchange event is triggered whenever the selection changes, allowing you to update the UI or display additional information. The SelectAll() method selects all nodes within the control, UnselectAll() clears the selection, and RemoveSelection() deletes the selected nodes (including their descendants). The SingleSel property defines the selection mode, supporting single, multiple, or toggle selection.

oOrgChart.EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area

The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area. The FitToClient() method is typically used to fit the entire layout or a specific layout-rectangle into the control's client area, while the EnsureVisibleClient() method is used to ensure that a specific client (layout-rectangle or element) is visible within the control's client area. The EnsureVisibleSelection() method is an alias of EnsureVisibleClient and ensures that the specified selection fits within the control's client area. The Home() method zooms to 100% and scrolls the control to origin (0,0).

oOrgChart.FitToClient(), fits the entire layout into the control's client area

The GetCanvas() method returns the HTMLCanvasElement object where the control is currently running on. The control is always running on a canvas, which is the canvas of the control's canvas-window (exontrol.CW). The GetCanvas() method is useful when you need to access the canvas directly. You can also use the GetCanvas() method to retrieve the canvas's context and perform custom drawing operations using the Canvas API. It is recommended to call the exontrol.CC.Resize(<canvas>, [width], [height]) method to resize and refresh the control; otherwise, the control's content is lost.

oOrgChart.GetCanvas(), gets the control's canvas element

The Home() method zooms to 100% and scrolls the control to origin (0,0). The Home() method is typically used to reset the view of the control's content to its default state, showing the entire content at its original size and position. This can be useful when users have zoomed in or out or scrolled away from the origin and want to quickly return to the default view. The Soom() method can be used to achieve this by setting the zoom factor to 100% and scrolling to the origin (0,0). The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area.

oOrgChart.Home(), zooms to 100% and scrolls the control to origin (0,0)

The Node() method retrieves a node by its key, searching from the specified oNode through all its descendants. The key parameter can be a string (node key or caption) or a Node object. If oNode is not provided, the search starts from the control's root node. The Root property returns the root node of the chart. The method returns null if no match is found, or a Node object if successful. It allows quick access to nodes for operations such as updating, expanding/collapsing, or managing selection. The Node.Item() method is an alias of Node(), providing the same functionality.

The following statements are equivalent:

 oOrgChart.Root.Item("key") {Node}, returns a node with specified key searching from the root node
 oOrgChart.Node("key", oOrgChart.Root) {Node}, returns a node with specified key searching from the root node
 oOrgChart.Node("key") {Node}, returns a node with specified key searching from the root node

where oOrgChart is an instance of OrgChart control

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

• The control's container has been resized and the layout must be recalculated.
• External CSS or styling changes affect the control's appearance.
• The control becomes visible after being hidden.
• You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

oOrgChart.Refresh(), refreshes the control

The RemoveSelection() method deletes selected-nodes (including all descendants). The Selection property defines the current selection and can be a node, an array of nodes, a node's key/identifier, or an array of node keys/identifiers. Users can select nodes by clicking or dragging when the "select" action is enabled in the AllowActions property, while Node.Selectable determines whether a node can be selected. You can also set the Selection property programmatically to control selection based on your application logic or user interactions, and the onselchange event is triggered whenever the selection changes, allowing you to update the UI or display additional information. The SelectAll() method selects all nodes within the control, UnselectAll() clears the selection, and EnsureVisibleSelection() scrolls the control to ensure the selection fits within the client area. The SingleSel property defines the selection mode, supporting single, multiple, or toggle selection. The Node.Remove() method removes a node from the control, including all its descendants.

oOrgChart.RemoveSelection(), deletes selected-nodes (including all descendants)

The SelectAll() method selects all nodes within the control. The Selection property defines the current selection and can be a node, an array of nodes, a node's key/identifier, or an array of node keys/identifiers. Users can select nodes by clicking or dragging when the "select" action is enabled in the AllowActions property, while Node.Selectable determines whether a node can be selected. You can also set the Selection property programmatically to control selection based on your application logic or user interactions, and the onselchange event is triggered whenever the selection changes, allowing you to update the UI or display additional information. The UnselectAll() method clears the selection, EnsureVisibleSelection() scrolls the control to ensure the selection fits within the client area, and RemoveSelection() deletes the selected nodes (including their descendants). The SingleSel property defines the selection mode, supporting single, multiple, or toggle selection.

oOrgChart.SelectAll(), selects all nodes within the control

The Shuffle() method arranges randomly all nodes within the control. The arrangement is applied only to the current layout and is not saved as part of the control's state, so once the layout is changed the nodes are restored to their original positions. However, if you want to restore the original layout without changing it, you can use the Unshuffle() method.

The following samples show how to shuffle/unshuffle the control's nodes when the mouse enters/leaves the control's area:

oOrgChart.GetCanvas().addEventListener("mouseleave", function()
{
  oOrgChart.oCV.Shuffle();
})

oOrgChart.GetCanvas().addEventListener("mouseenter", function()
{
  oOrgChart.oCV.Unshuffle();
})

The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. The smooth-transition goes from the current layout to the new layout generated by the callback. The smooth field defines the time in ms the control goes from one layout to another. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

The following sample shows how to use the Smooth() method:

 oOrgChart.Smooth(function()
 {
  ...
 });

where oOrgChart is an object of OrgChart type

The Soom() method zooms or/and scrolls the control's content. The Soom() method can be used to smoothly zoom in or out of the control's content and scroll to a specific point within the content. This method is particularly useful for providing a better user experience when navigating through large or detailed content, allowing users to focus on specific areas while maintaining context. The zoomTo parameter specifies the target zoom factor, while the oPointAbs and rgrOrigin parameters determine the point to scroll into view and its relative position within the control's client area. By using the Soom() method, developers can create interactive and dynamic interfaces that enhance user engagement with the control's content. The Home() method can be used to reset the view to the default state, showing the entire content at its original size and position, while the FitToClient() method ensures that the entire (null/undefined) or given layout fits the control's client area.

oOrgChart.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position
oOrgChart.Soom(150, [0,0], [0,0]), zooms to 150% and brings the origin (0,0) at top-left corner

The ToggleExpandNode() method expands a node if it is collapsed, or collapses it if it is expanded, performing a smooth transition between layouts. During this transition, the node's visible descendants - both before and after the action - are animated so they appear or disappear naturally from the node or its expand/collapse glyphs. The method toggles the Node.Expand property for the specified nodes and automatically scrolls the control to keep the affected node in the same position relative to the control's client view. If the EnsureOnExpand property is true, the control additionally scrolls to ensure that the node's visible descendants fit within the client area. By default, ToggleExpandNode() is invoked when clicking or double-clicking the node's expand/collapse glyphs (when the ExpandOnDblClick property is true), but it can also be called programmatically to control the expand/collapse state of a node.

oOrgChart.oCV.ToggleExpandNode(oOrgChart.Root), toggles the expand/collapse state of the root node and all its descendant nodes

The UnselectAll() method clears the control's selection. The Selection property defines the current selection and can be a node, an array of nodes, a node's key/identifier, or an array of node keys/identifiers. Users can select nodes by clicking or dragging when the "select" action is enabled in the AllowActions property, while Node.Selectable determines whether a node can be selected. You can also set the Selection property programmatically to control selection based on your application logic or user interactions, and the onselchange event is triggered whenever the selection changes, allowing you to update the UI or display additional information. The SelectAll() method selects all nodes within the control, EnsureVisibleSelection() scrolls the control to ensure the selection fits within the client area, and RemoveSelection() deletes the selected nodes (including their descendants). The SingleSel property defines the selection mode, supporting single, multiple, or toggle selection.

oOrgChart.UnselectAll(), clears the control's selection

The Unshuffle() method restores the nodes of the control in case they were shuffled. The Shuffle() method arranges randomly all nodes within the control. The arrangement is applied only to the current layout and is not saved as part of the control's state, so once the layout is changed the nodes are restored to their original positions. However, if you want to restore the original layout without changing it, you can use the Unshuffle() method.

The following samples show how to shuffle/unshuffle the control's nodes when the mouse enters/leaves the control's area:

oOrgChart.GetCanvas().addEventListener("mouseleave", function()
{
  oOrgChart.oCV.Shuffle();
})

oOrgChart.GetCanvas().addEventListener("mouseenter", function()
{
  oOrgChart.oCV.Unshuffle();
})

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oOrgChart.Update(function()
{
 // performs multiple changes to the control
});

The feN() method iterates the control's nodes in a forward direction, and performs the callback for each node. The callback receives the current node and the node's position within the iteration as parameters during each iteration. The feNU() method iterates the control's nodes in a forward direction, and performs the callback for each node until the callback returns a truthy value. The feN and feNU methods are useful for performing operations on each node within the control, such as updating properties, applying styles, or gathering information. The feN() method will execute the callback for every node in the control, while the feNU() method will stop iterating as soon as the callback returns a truthy value, allowing for more efficient processing when you only need to find a specific node or condition. The Node.forEach() method is equivalent of the feN() method, and the Node.forEachU() method is equivalent of the feNU() method, but they iterate the nodes within a specific branch (starting from the node) rather than the entire control.

The following sample logs the caption of each node within the control:

oOrgChart.feN(function(oNode, position)
{
 console.log(oNode.Caption);
});

where oOrgChart is an object of OrgChart type

The feNU() method iterates the control's nodes in a forward direction, and performs the callback for each node until the callback returns a truthy value. The callback receives the current node and the node's position within the iteration as parameters during each iteration. The feN and feNU methods are useful for performing operations on each node within the control, such as updating properties, applying styles, or gathering information. The feN() method will execute the callback for every node in the control, while the feNU() method will stop iterating as soon as the callback returns a truthy value, allowing for more efficient processing when you only need to find a specific node or condition. The Node.forEach() method is equivalent of the feN() method, and the Node.forEachU() method is equivalent of the feNU() method, but they iterate the nodes within a specific branch (starting from the node) rather than the entire control.

The following sample logs the first disabled node's details within the control:

 console.log(oOrgChart.feNU(function(oNode, position)
 {
  return !oNode.Enabled && oNode;
 }));

where oOrgChart is an object of OrgChart type

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. 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. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).

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

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.

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);
});