Options class (OrgChart)

The align field determines 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 field 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 field 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

The align field is mapped to the Align property, which means that the following statements are equivalent:

oOrgChart.Options = {align: "left"}
oOrgChart.SetOptions({align: "left"})
oOrgChart.Align = "left"
oOrgChart.SetAlign("left")

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 field defines a list of actions separated by comma that the user can perform by drag or click on the control's content. 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

The allowActions field is mapped to the AllowActions property, which means that the following statements are equivalent:

oOrgChart.Options = {allowActions: "move(Shift+LButton),scroll(LButton),select()"}
oOrgChart.SetOptions({allowActions: "move(Shift+LButton),scroll(LButton),select()"})
oOrgChart.AllowActions = "move(Shift+LButton),scroll(LButton),select()"
oOrgChart.SetAllowActions("move(Shift+LButton),scroll(LButton),select()")

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 field specifies the mouse cursor to be displayed when pointing over a part of the control. These cursors determine the pointer appearance when the user hovers over specific areas, allowing you to provide visual feedback for interactive regions of the control. The Node.Cursors property sets cursors for a specific node and its descendants (parts), overriding the charts default cursors. The Node.Cursor property sets the cursor for a single node, allowing 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

The cursors field is mapped to the Cursors property, which means that the following statements are equivalent:

oOrgChart.Options = {cursors: "pointer(node)"}
oOrgChart.SetOptions({cursors: "pointer(node)"})
oOrgChart.Cursors = "pointer(node)"
oOrgChart.SetCursors("pointer(node)")

"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 field specifies whether the control scrolls its content to ensure that the node's descendants fits it. The expandOnDblClick field indicates whether the node gets expanded as soon as the user double-clicks the node. When ensureOnExpand is true, expanding or collapsing a node will automatically scroll the control to ensure that all of the node's descendants are visible within the control's viewport. This feature enhances the user experience by preventing nodes from being hidden when they are expanded or collapsed, allowing users to easily view and interact with all relevant nodes in the organizational chart.

The ensureOnExpand field is mapped to the EnsureOnExpand property, which means that the following statements are equivalent:

oOrgChart.Options = {ensureOnExpand: true}
oOrgChart.SetOptions({ensureOnExpand: true})
oOrgChart.EnsureOnExpand = true
oOrgChart.SetEnsureOnExpand(true)

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 field specifies the size to show the node's expand/collapse glyphs. The singleExpandGlyphs field specifies whether a node shows a single or multiple expand/collapse glyphs. The showExpandGlyphs field controls which types of nodes display glyphs. The Node.Expand property specifies whether the node is expanded or collapsed, and the expand/collapse glyphs are visual indicators that allow users to expand or collapse nodes in the organizational chart. By setting the expandGlyphSize field to a specific number, you can control the size of these glyphs to make them more visible or subtle based on your design preferences. For example, setting expandGlyphSize to 24 will display the expand/collapse glyphs at a size of 24x24 pixels, making them easier for users to interact with. If you prefer not to show the expand/collapse glyphs at all, simply set this field to 0, and the control will not display any glyphs for expanding or collapsing nodes.

The expandGlyphSize field is mapped to the ExpandGlyphSize property, which means that the following statements are equivalent:

oOrgChart.Options = {expandGlyphSize: 24}
oOrgChart.SetOptions({expandGlyphSize: 24})
oOrgChart.ExpandGlyphSize = 24
oOrgChart.SetExpandGlyphSize(24)

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 field indicates whether the node gets expanded as soon as the user double-clicks the node. When expandOnDblClick is true, users can quickly expand or collapse nodes by double-clicking on them, providing a convenient way to navigate through the organizational chart. If expandOnDblClick is false, double-clicking on a node will not trigger any expansion or collapse action, and users will need to use the expand/collapse glyphs (if enabled) or other methods to change the node's state. The ensureOnExpand field specifies whether the control scrolls its content to ensure that the node's descendants fits it. The Node.Expand property indicates whether a specific node is expanded or collapsed.

The expandOnDblClick field is mapped to the ExpandOnDblClick property, which means that the following statements are equivalent:

oOrgChart.Options = {expandOnDblClick: true}
oOrgChart.SetOptions({expandOnDblClick: true})
oOrgChart.ExpandOnDblClick = true
oOrgChart.SetExpandOnDblClick(true)

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 field specifies a wildcard expression used to match a node's plain caption. It can be null (no filter) or a pattern that determines which nodes are visible. By using wildcard expressions, you can filter nodes based on their captions, making it easier to focus on and analyze specific parts of the organizational chart. The show field 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"

The filter field is mapped to the Filter property, which means that the following statements are equivalent:

oOrgChart.Options = {filter: "a* *b"}
oOrgChart.SetOptions({filter: "a* *b"})
oOrgChart.Filter = "a* *b"
oOrgChart.SetFilter("a* *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 field 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 field, you can control the chart's layout to best represent your data and make relationships between nodes easier to understand at a glance. The margins field 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 field 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

The flow field is mapped to the Flow property, which means that the following statements are equivalent:

oOrgChart.Options = {flow: Layout.FlowEnum.exFlowVertical}
oOrgChart.SetOptions({flow: Layout.FlowEnum.exFlowVertical})
oOrgChart.Flow = Layout.FlowEnum.exFlowVertical
oOrgChart.SetFlow(Layout.FlowEnum.exFlowVertical)

"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 field 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 focus can be defined as any of the following:

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

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 field specifies the format to display the labels or captions on the control. The formatText field is a bitwise combination of flags that control the alignment, word-breaking, tab expansion, and other aspects of how text is rendered within the control. For example, you can choose to align text to the center, enable word-breaking for long captions, or specify that text should be displayed on a single line. The exontrol.DrawTextFormatEnum type defines various flags that 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.

The formatText field is mapped to the FormatText property, which means that the following statements are equivalent:

oOrgChart.Options = {formatText: exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom}
oOrgChart.SetOptions({formatText: exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom})
oOrgChart.FormatText = exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom
oOrgChart.SetFormatText(exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom)

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 field defines the alignment of the image within the node. The imageSize field defines the size of the node's image. The imageSize and imageAlign properties work together to control how the image is displayed within the node. The imageSize property specifies the dimensions of the image, while the imageAlign property determines where the image is positioned in relation to the caption. Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the imageAlign field does not affect images inserted with the <img> tag. for example: <r><img>apple</img> aligns the image named "apple" to the right. 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 imageAlign field can be any of the following:

• 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

The imageAlign field is mapped to the ImageAlign property, which means that the following statements are equivalent:

oOrgChart.Options = {imageAlign: 0}
oOrgChart.SetOptions({imageAlign: 0})
oOrgChart.ImageAlign = 0
oOrgChart.SetImageAlign(0)

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 field defines the size of the node's image. The imageAlign field defines the alignment of the image within the node. The imageSize and imageAlign properties work together to control how the image is displayed within the node. The imageSize property specifies the dimensions of the image, while the imageAlign property determines where the image is positioned in relation to the caption. Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the imageSize field does not affect images inserted with the <img> tag. The <img> tag supports additional size attribute that specifies the picture's size such as "<img>apple:18</img>2002", which indicates that the image named apple has a size of 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 imageSize could be of one of the following types:

• {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.

The imageSize field is mapped to the ImageSize property, which means that the following statements are equivalent:

oOrgChart.Options = {imageSize: 64}
oOrgChart.SetOptions({imageSize: 64})
oOrgChart.ImageSize = 64
oOrgChart.SetImageSize(64)

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 link field specifies the attributes of the link between a node and its descendant nodes (as an object of {type, dir, width, color, arrow, arrowSize, arrowShape, style} type). The showLinks field indicates whether the control shows or hides the links between nodes. The linka field specifies the attributes of the link between a node and its assistent-nodes. The linkg field specifies the attributes of the link between a node and its group-nodes. The Node.Link property sets the link attributes for a specific node and its descendant nodes, overriding the charts default link attributes for that node and its descendants, allowing for customized link attributes within the same chart. By default, the link field is null equivalent of {color: 'rgba(0,0,0,0.5)', arrow: 'rgb(128,128,128)'}, which means that the links are shown with a semi-transparent black color and gray arrows.

The link field is mapped to the Link property, which means that the following statements are equivalent:

oOrgChart.Options = {link: {color: 'red', width: 2, arrow: 'blue'}}
oOrgChart.SetOptions({link: {color: 'red', width: 2, arrow: 'blue'}})
oOrgChart.Link = {color: 'red', width: 2, arrow: 'blue'}
oOrgChart.SetLink({color: 'red', width: 2, arrow: 'blue'})

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 field specifies the attributes of the link between a node and its assistent-nodes (as an object of {type, dir, width, color, arrow, arrowSize, arrowShape, style} type). The showLinks field indicates whether the control shows or hides the links between nodes. The link field specifies the attributes of the link between a node and its descendant nodes. The linkg field specifies the attributes of the link between a node and its group-nodes. The Node.Linka property sets the link attributes for a specific node and its assistant nodes, overriding the charts default link attributes for that node and its assistant nodes, allowing for customized link attributes within the same chart. By default, the linka field is null equivalent of {color: 'rgba(0,0,0,0.25)', arrow: 'rgb(192,192,192)', style: [2]}, which means that the links between a node and its assistant nodes are shown with a lighter semi-transparent black color, gray arrows and dashed style.

The linka field is mapped to the Linka property, which means that the following statements are equivalent:

oOrgChart.Options = {linka: {color: 'red', width: 2, arrow: 'blue', style: [4,2]}}
oOrgChart.SetOptions({linka: {color: 'red', width: 2, arrow: 'blue', style: [4,2]}})
oOrgChart.Linka = {color: 'red', width: 2, arrow: 'blue', style: [4,2]}
oOrgChart.SetLinka({color: 'red', width: 2, arrow: 'blue', style: [4,2]})

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 field specifies the attributes of the link between a node and its group-nodes (as an object of {type, dir, width, color, arrow, arrowSize, arrowShape, style} type). The showLinks field indicates whether the control shows or hides the links between nodes. The link field specifies the attributes of the link between a node and its descendant nodes. The linka field specifies the attributes of the link between a node and its assistent-nodes. The Node.Linkg property sets the link attributes for a specific node and its group nodes, overriding the charts default link attributes for that node and its group nodes, allowing for customized link attributes within the same chart. By default, the linkg field is null equivalent of {type: 3, color: 'rgba(0,0,0,0.125)', arrow: 'rgb(224,224,224)', style: [2]}, which means that the links between a node and its group nodes are shown with a very lighter semi-transparent black color, gray arrows and dashed style.

The linkg field is mapped to the Linkg property, which means that the following statements are equivalent:

oOrgChart.Options = {linkg: {color: 'red', width: 2, arrow: 'blue', style: [4,2]}}
oOrgChart.SetOptions({linkg: {color: 'red', width: 2, arrow: 'blue', style: [4,2]}})
oOrgChart.Linkg = {color: 'red', width: 2, arrow: 'blue', style: [4,2]}
oOrgChart.SetLinkg({color: 'red', width: 2, arrow: 'blue', style: [4,2]})

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 locked field determines whether the control is locked (protected) or unlocked. When locked is true, users cannot select any nodes, preventing interaction and accidental changes - ideal for displaying a static organizational chart. When locked is false, users can select nodes to view details or perform actions. Unlike the readOnly field, which prevents hierarchy changes (the allowActions field 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 field is set to false, allowing users to interact with the organizational chart.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oOrgChart.Options = {locked: true}
oOrgChart.SetOptions({locked: true})
oOrgChart.Locked = true
oOrgChart.SetLocked(true)

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

The margins field specifies the horizontal and vertical distance between nodes, as an object of {x, y, indent, border} type. This field allows you to control the spacing between nodes in the organizational chart, which can enhance readability and visual appeal. By adjusting the margins, you can create a more spacious layout or a more compact one, depending on your design preferences and the amount of information being displayed. The flow field defines the arrangement of nodes within the control, and the margins field allows you to adjust the spacing between these nodes to improve readability and visual appeal. 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, allowing for customized spacing within the same chart.

The margins field 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 field 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.

The margins field is mapped to the Margins property, which means that the following statements are equivalent:

oOrgChart.Options = {margins: {x: 20, y: 20, indent: 30, border: 10}}
oOrgChart.SetOptions({margins: {x: 20, y: 20, indent: 30, border: 10}})
oOrgChart.Margins = {x: 20, y: 20, indent: 30, border: 10}
oOrgChart.SetMargins({x: 20, y: 20, indent: 30, border: 10})

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 field builds the control's hierarchy from a string-representation. For instance, the string "Root(A,B(1,2),C)" defines a root node "Root" with three child nodes: "A", "B", and "C". Node "B" has two child nodes: "1" and "2". This string format allows for a concise and intuitive way to define the organizational chart's structure, making it easier to visualize and manage complex hierarchies. By using this string representation, you can quickly set up and modify the organizational chart without needing to manually create each node and establish their relationships through code. The Node.Nodes property sets the child nodes for a specific node using the same string representation format, allowing for consistent and efficient hierarchy management within the chart. You can use the AddChild, AddAssistant and AddGroup methods of the Node object to add child, assistant and group nodes to a specific node, respectively, while the Node.Remove method removes the node itself from the chart along with all its descendant nodes.

The format of the field 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 (unselecatble)
• [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]

The nodes field is mapped to the Nodes property, which means that the following statements are equivalent:

oOrgChart.Options = {nodes: "Root(1,2(2.1,2.2),3)"}
oOrgChart.SetOptions({nodes: "Root(1,2(2.1,2.2),3)"})
oOrgChart.Nodes = "Root(1,2(2.1,2.2),3)"
oOrgChart.SetNodes("Root(1,2(2.1,2.2),3)")

"" {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 pad field defines the node's padding (space between the node's content and its border). The pad field helps control the 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, which can override the chart's default padding for that node and its descendants, allowing for customized padding within the same chart.

The pad field can be one of the following types:

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

The pad field is mapped to the Pad property, which means that the following statements are equivalent:

oOrgChart.Options = {pad: "8,4"}
oOrgChart.SetOptions({pad: "8,4"})
oOrgChart.Pad = "8,4"
oOrgChart.SetPad("8,4")

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 field indicates whether the control is read-only. When readOnly is true, users can select nodes but cannot modify the hierarchy (the allowActions field includes the "move" action, allowing users to drag and drop nodes between parents). When readOnly is false, users can both select nodes and modify the hierarchy. The locked field disables both selection and modification, while readOnly allows selection but prevents hierarchy changes, providing a more flexible option for controlling user interaction with the organizational chart. By default, the readOnly field is set to false, allowing users to interact with the organizational chart and make changes to the hierarchy as needed.

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oOrgChart.Options = {readOnly: true}
oOrgChart.SetOptions({readOnly: true})
oOrgChart.ReadOnly = true
oOrgChart.SetReadOnly(true)

false {boolean}, the control is not read-only
true {boolean}, the control is read-only

The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. The scrollBars field accepts an OR combination of ScrollBarsEnum flags that specifies the type of scroll bars to be shown. By default, the scrollBars field is set to exBoth, which means that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area. The scroll bars are automatically hidden when they are not needed, unless the scrollBars field includes exDisableNoHorizontal, exDisableNoVertical or exDisableBoth flags. The onscroll event is fired when the user scrolls the control's content.

The exontrol.ScrollBarsEnum type defines the following flags:

• exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
• exHorizontal (1), specifies that only horizontal scroll bars is shown
• exVertical (2), specifies that only vertical scroll bars 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, 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 (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• 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 cursor hovers the window. Also, the control's client area is extended on the scroll bars 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)

The scrollBars field is mapped to the ScrollBars property, which means that the following statements are equivalent:

oOrgChart.Options = {scrollBars: exontrol.ScrollBarsEnum.exDisableBoth}
oOrgChart.SetOptions({scrollBars: exontrol.ScrollBarsEnum.exDisableBoth})
oOrgChart.ScrollBars = exontrol.ScrollBarsEnum.exDisableBoth
oOrgChart.SetScrollBars(exontrol.ScrollBarsEnum.exDisableBoth)

The scrollBars field is mapped to the ScrollBars property, which means that the following statements are equivalent:

oOrgChart.Options = {scrollBars: "disableBoth"}
oOrgChart.SetOptions({scrollBars: "disableBoth"})
oOrgChart.ScrollBars = "disableBoth"
oOrgChart.SetScrollBars("disableBoth")

0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed
15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible
12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control

The scrollBarsRoot field specifies the color to highlight the position of root on the control's scroll bars (indicates null, to prevent showing the position of root on the control's scroll bars, or a CSS color). The scroll bars of the control can show the position of the root node as a highlighted area, which helps users understand where the root node is located within the overall content. By setting the scrollBarsRoot field to a specific CSS color, you can customize the appearance of this highlighted area to make it more visually distinct. If you prefer not to show the position of the root node on the scroll bars, simply set this field to null, and the control will not display any indication of the root's position on the scroll bars. The scrollBars field must be set to a value that shows the scroll bars for this option to take effect.

The scrollBarsRoot field is mapped to the ScrollBarsRoot property, which means that the following statements are equivalent:

oOrgChart.Options = {scrollBarsRoot: "red"}
oOrgChart.SetOptions({scrollBarsRoot: "red"})
oOrgChart.ScrollBarsRoot = "red"
oOrgChart.SetScrollBarsRoot("red")

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 field defines the control's selection as a node, an array of nodes, a node's key/identifier or an array of nodes' keys/identifiers. The user can select nodes by click or drag with the "select" action defined in the allowActions field. The Node.Selectable property specifies whether a specific node can be selected by the user. Setting the selection programmatically allows you to control which nodes are selected based on your application's logic or user interactions. For example, you can select a specific node when a user clicks a button or when certain conditions are met in your application. The onselchange event is triggered whenever the selection changes, allowing you to respond to selection changes and perform actions such as 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 selection can be defined as any of the following:

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

The selection field is mapped to the Selection property, which means that the following statements are equivalent:

oOrgChart.Options = {selection: "Root"}
oOrgChart.SetOptions({selection: "Root"})
oOrgChart.Selection = "Root"
oOrgChart.SetSelection("Root")

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 field defines the shapes used by different parts of the control. It 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 (parts), overriding the charts 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

The shapes field is mapped to the Shapes property, which means that the following statements are equivalent:

oOrgChart.Options = {shapes: "red(node)"}
oOrgChart.SetOptions({shapes: "red(node)"})
oOrgChart.Shapes = "red(node)"
oOrgChart.SetShapes("red(node)")

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 show field specifies which types of nodes are displayed in the chart, filtering nodes by type. It can be null (no filter) or a combination of NodeTypeEnum flags. For example, setting show to exNodeChild displays only child nodes. The filter field specifies a wildcard expression used to match a node's plain caption, allowing additional filtering based on text. The Node.Show property defines the types of descendant nodes a specific node displays. It can override the chart-level show setting for that node and its descendants, enabling more granular control 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

The show field is mapped to the Show property, which means that the following statements are equivalent:

oOrgChart.Options = {show: exontrol.OrgChart.NodeTypeEnum.exNodeChild}
oOrgChart.SetOptions({show: exontrol.OrgChart.NodeTypeEnum.exNodeChild})
oOrgChart.Show = exontrol.OrgChart.NodeTypeEnum.exNodeChild
oOrgChart.SetShow(exontrol.OrgChart.NodeTypeEnum.exNodeChild)

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 field controls whether expand/collapse glyphs are displayed for specific types of nodes. It accepts a combination of NodeTypeEnum flags to determine which node types show the glyphs. The singleExpandGlyphs field specifies whether a node displays a single or multiple glyphs, and the expandGlyphSize field 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. By configuring showExpandGlyphs, you can customize the user interface to indicate which nodes can be expanded or collapsed, enhancing the user experience when navigating through the organizational chart. For example, setting showExpandGlyphs to exNodeChild | exNodeAssistant will display expand/collapse glyphs only for child and assistant nodes, while group nodes will not show any glyphs. The Node.ShowExpandGlyphs property specifies which types of nodes show the expand/collapse glyphs for a specific node, which can override the chart's default settings for that node and its descendants, allowing for 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

The showExpandGlyphs field is mapped to the ShowExpandGlyphs property, which means that the following statements are equivalent:

oOrgChart.Options = {showExpandGlyphs: "child,assistant"}
oOrgChart.SetOptions({showExpandGlyphs: "child,assistant"})
oOrgChart.ShowExpandGlyphs = "child,assistant"
oOrgChart.SetShowExpandGlyphs("child,assistant")

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 field indicates whether the control shows or hides the links between nodes. The link field specifies the attributes of the link between a node and its descendant nodes. The linka field specifies the attributes of the link between a node and its assistent-nodes. The linkg field specifies the attributes of the link 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.

The showLinks field is mapped to the ShowLinks property, which means that the following statements are equivalent:

oOrgChart.Options = {showLinks: exontrol.ShowLinksEnum.exShow | exontrol.ShowLinksEnum.exFront}
oOrgChart.SetOptions({showLinks: exontrol.ShowLinksEnum.exShow | exontrol.ShowLinksEnum.exFront})
oOrgChart.ShowLinks = exontrol.ShowLinksEnum.exShow | exontrol.ShowLinksEnum.exFront
oOrgChart.SetShowLinks(exontrol.ShowLinksEnum.exShow | exontrol.ShowLinksEnum.exFront)

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 field specifies whether a node shows a single or multiple expand/collapse glyphs. The showExpandGlyphs field controls which types of nodes display glyphs, and expandGlyphSize field sets their size. When singleExpandGlyphs is 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 Node.SingleExpandGlyphs property specifies whether a specific node shows a single or multiple expand/collapse glyphs, which can override the chart's default settings for that node and its descendants, allowing for customized display of glyphs within the same chart.

The singleExpandGlyphs field is mapped to the SingleExpandGlyphs property, which means that the following statements are equivalent:

oOrgChart.Options = {singleExpandGlyphs: true}
oOrgChart.SetOptions({singleExpandGlyphs: true})
oOrgChart.SingleExpandGlyphs = true
oOrgChart.SetSingleExpandGlyphs(true)

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 field defines whether the control supports single, multiple, toggle selection. 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.

The singleSel field is mapped to the SingleSel property, which means that the following statements are equivalent:

oOrgChart.Options = {singleSel: OrgChart.SingleSelEnum.exSingleSel | OrgChart.SingleSelEnum.exEnableSel}
oOrgChart.SetOptions({singleSel: OrgChart.SingleSelEnum.exSingleSel | OrgChart.SingleSelEnum.exEnableSel})
oOrgChart.SingleSel = OrgChart.SingleSelEnum.exSingleSel | OrgChart.SingleSelEnum.exEnableSel
oOrgChart.SetSingleSel(OrgChart.SingleSelEnum.exSingleSel | OrgChart.SingleSelEnum.exEnableSel)

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 field defines the size, range of limits the node's caption is displayed. The size field controls how the node's caption is rendered within the node, allowing you to specify the dimensions or limits for the caption's display. By setting the size property, you can ensure that captions fit within a certain area of the node, which can help maintain a consistent and organized appearance in the organizational chart. The Node.Size property specifies the size of the caption for a specific node. It can override the chart's default caption size for that node, allowing for customized caption sizes within the same chart.

The size field could be any of the following:

• null {null}, specifies no limit for the node's caption.
• number {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
• [min-width,min-height,max-width,max-height] {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)

The size field is mapped to the Size property, which means that the following statements are equivalent:

oOrgChart.Options = {size: 64}
oOrgChart.SetOptions({size: 64})
oOrgChart.Size = 64
oOrgChart.SetSize(64)

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 field defines the time in ms the control goes from one layout to another. Setting the smooth field to 0 means that no smooth changes are performed once the control goes from a layout to another. Setting the smooth field to 125 means that a smooth-transition is performed from a layout to another for 125 ms. The Smooth() method smoothly transitions the control from the current layout to a new layout, applying gradual changes rather than an immediate switch.

The smooth field is mapped to the GetSmooth()/SetSmooth method, which means that the following statements are equivalent:

oOrgChart.Options = {smooth: 125}
oOrgChart.SetOptions({smooth: 125})
oOrgChart.SetSmooth(125)

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 tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

The tfi field 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 tfi field 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 tfi field 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.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oOrgChart.Options = {tfi: "b monospace 16 <fg blue>"}
oOrgChart.SetOptions({tfi: "b monospace 16 <fg blue>"})
oOrgChart.Tfi = "b monospace 16 <fg blue>"
oOrgChart.SetTfi("b monospace 16 <fg blue>")

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 field specifies how much the control scrolls when the user rotates 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.

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oOrgChart.Options = {wheelChange: 5}
oOrgChart.SetOptions({wheelChange: 5})
oOrgChart.WheelChange = 5
oOrgChart.SetWheelChange(5)

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 field defines the zoom factor of the control's content and can range from 10 (10%) to 1000 (1000%). Together, the zoom and zoomLevels fields control the zooming behavior, allowing users to magnify or reduce the view of the content. Setting zoom determines the current zoom level, while zoomLevels defines the allowed zoom options. For example, if zoom is set to 150 and zoomLevels to "50,100,150,200", the current zoom level will be 150%, and users can choose from the listed zoom levels.

The zoom field is mapped to the Zoom property, which means that the following statements are equivalent:

oOrgChart.Options = {zoom: 150}
oOrgChart.SetOptions({zoom: 150})
oOrgChart.Zoom = 150
oOrgChart.SetZoom(150)

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

The zoomLevels field defines the allowed zoom levels for the control's content. It can be set to null, a single number, or a comma-separated string of numbers. When set to null, the control's zoom factor is fixed at 100%, meaning users cannot zoom in or out. If set to a single number (e.g., 150), the control's zoom factor is fixed at that percentage (e.g., 150%). When set to a comma-separated string of numbers (e.g., "50,100,200,350"), it indicates that users can select from those specific zoom levels, allowing for flexible zooming options within the defined range (in this case, from 50% to 350%).

The zoomLevels field is mapped to the ZoomLevels property, which means that the following statements are equivalent:

oOrgChart.Options = {zoomLevels: "50,100,150,200"}
oOrgChart.SetOptions({zoomLevels: "50,100,150,200"})
oOrgChart.ZoomLevels = "50,100,150,200"
oOrgChart.SetZoomLevels("50,100,150,200")

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%