CV class (OrgChart)

CV(oOrgChart)

new CV(oOrgChart)

The CV class defines the view that displays the nodes of the OrgChart control, while the oCV member exposes this view as an object of type CV. The CV object is responsible for rendering the organizational chart and handling user interactions within the control's client area, keeping the visual representation separate from the control's core logic. The CV object is created during the initialization of the OrgChart control and remains associated with it to ensure proper communication between the control's logic and its visual layer. Nearly all methods of the oCV object are delegated to the owning control (OrgChart), providing seamless integration between functionality and visual representation.
Parameters:
Name Type Description
oOrgChart OrgChart Indicates the owner control, as an object of OrgChart type (@since 1.8).

Methods

EnsureVisibleClient(clientA, ensureOptsopt)

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.
Parameters:
Name Type Attributes Description
clientA object The client parameter could be any of the following:
  • {array}, specifies an array of [x,y,width,height] type that indicates the absolute-coordinates of the layout-rectangle to fit into the control's client area
  • {object}, indicates an object of {Node} type or any other type the control's layout contains, that indicates the object to fit into the control's client area
ensureOpts object <optional>
 Specifies different options to run the current method as explained:
  • allowScale {boolean}, updates the control's scale/zoom-factor to ensure full-fit the client (@since 5.2)
  • nearestFit {boolean}, ensures that corner of the object nearest the window's client area fits it (it has effect only if the size of the object is greater than size of the window's client area) (@since 5.2)
Example
oOrgChart.EnsureVisibleClient( oOrgChart.Node("ley") ), ensures that the node with key "ley" fits the control's client area
EnsureVisibleClient

EnsureVisibleNode(key)

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.
Parameters:
Name Type Description
key any The key parameter can be any of the following:
  • {string}, Specifies the node's key or caption
  • {object}, Indicates an object of Node that specifies the node itself
Example
oOrgChart.EnsureVisibleNode( "ley" ), ensures that the node with key "ley" fits the control's client area
EnsureVisibleNode

EnsureVisibleSelection()

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.
Example
oOrgChart.EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area
EnsureVisibleSelection

FitToClient(rtLayout)

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).
Parameters:
Name Type Description
rtLayout Array.<number> Indicates null for entire layout or an array of [x,y,width,height] type that defines the absolute-coordinate to fit to client.
Example
oOrgChart.FitToClient(), fits the entire layout into the control's client area
FitToClient

GetAlign() → {exontrol.AlignEnum}

The GetAlign() method 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 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
Returns:
Returns the assistant/child-nodes' alignment relative to the node itself.
Type
exontrol.AlignEnum
Example
The following statements are equivalent:

 oOrgChart.GetAlign() {exontrol.AlignEnum}, returns the assistant/child-nodes' alignment relative to the node itself
 oOrgChart.Align {exontrol.AlignEnum}, returns the assistant/child-nodes' alignment relative to the node itself

where oOrgChart is an instance of OrgChart control
GetAlign

GetAllowActions() → {string}

The GetAllowActions() method gets 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.
Returns:
Returns the actions the user can perform once the control is clicked or touched

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
Type
string

GetCanvas() → {HTMLCanvasElement}

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.
Returns:
Returns the HTMLCanvasElement object the control is running on.
Type
HTMLCanvasElement
Example
oOrgChart.GetCanvas(), gets the control's canvas element
GetCanvas

GetCursors() → {string}

The GetCursors() method gets 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.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control.

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
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetCursors() {string}, returns a string expression that defines the mouse cursor to display when pointing over different parts of the control
 oOrgChart.Cursors {string}, returns a string expression that defines the mouse cursor to display when pointing over different parts of the control

where oOrgChart is an instance of the OrgChart control.
GetCursors

GetEnsureOnExpand() → {boolean}

The GetEnsureOnExpand() method 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.
Returns:
Returns true if the control scrolls its content to ensure that the node's descendants fits the control's client area.
Type
boolean
Example
The following statements are equivalent:

 oOrgChart.GetEnsureOnExpand() {boolean}, indicates whether the control scrolls its content to ensure that the node's descendants fits it
 oOrgChart.EnsureOnExpand {boolean}, indicates whether the control scrolls its content to ensure that the node's descendants fits it

where oOrgChart is an instance of OrgChart control
GetEnsureOnExpand

GetExpandGlyphSize() → {number}

The GetExpandGlyphSize() method specifies 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.
Returns:
Returns the size to show the node's expand/collapse glyphs. By default, the value is 16, which displays the glyphs at 16 by 16 pixels.
Type
number
Example
The following statements are equivalent:

 oOrgChart.GetExpandGlyphSize() {number}, returns the size to show the node's expand/collapse glyphs
 oOrgChart.ExpandGlyphSize {number}, returns the size to show the node's expand/collapse glyphs

where oOrgChart is an instance of OrgChart control
GetExpandGlyphSize

GetExpandOnDblClick() → {boolean}

The GetExpandOnDblClick() method 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.
Returns:
Returns true if the node gets expanded as soon as the user double-clicks the node.
Type
boolean
Example
The following statements are equivalent:

 oOrgChart.GetExpandOnDblClick() {boolean}, indicates whether the node gets expanded as soon as the user double-clicks the node
 oOrgChart.ExpandOnDblClick {boolean}, indicates whether the node gets expanded as soon as the user double-clicks the node

where oOrgChart is an instance of OrgChart control
GetExpandOnDblClick

GetFilter() → {string}

The GetFilter() method 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"
Returns:
Returns null (no filter), or a wild-character expression that defines the mask to match the node's plain caption. For instance "*a" indicates every caption that ends on `a`
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetFilter() {string}, returns the control's filter by caption
 oOrgChart.Filter {string}, returns the control's filter by caption

where oOrgChart is an instance of OrgChart control
GetFilter

GetFlow() → {Layout.FlowEnum}

The GetFlow() method gets 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.
Returns:
Returns the chart's flow/arrangement as a Layout.FlowEnum type (string)

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
Type
Layout.FlowEnum
Example
The following statements are equivalent:

 oOrgChart.GetFlow() {Layout.FlowEnum}, returns the chart's flow/arrangement as a Layout.FlowEnum type (string)
 oOrgChart.Flow {Layout.FlowEnum}, returns the chart's flow/arrangement as a Layout.FlowEnum type (string)

where oOrgChart is an instance of OrgChart control
GetFlow

GetFocus() → {Node}

The GetFocus() method returns the control's focus node (which is the root if no selection is available). The control always has a focus node, even if there is no selection, in this case the focus node is the root node. 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.
Returns:
Returns an object of Node type that specifies the control's focus node
Type
Node
Example
The following statements are equivalent:

 oOrgChart.GetFocus() {Node}, gets the focus node of the control
 oOrgChart.Focus {Node}, gets the focus node of the control

where oOrgChart is an object of OrgChart type
GetFocus

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies 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.
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the node's caption.

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.
Type
exontrol.DrawTextFormatEnum
Example
The following statements are equivalent:

 oOrgChart.GetFormatText() {number}, gets the format to display the node's caption.
 oOrgChart.FormatText {number}, gets the format to display the node's caption.

where oOrgChart is an instance of OrgChart control
GetFormatText

GetImageAlign() → {number}

The GetImageAlign() method gets 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.
Returns:
Returns the alignment of the node's image as explained:
  • 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
Type
number
Example
The following statements are equivalent:

 oOrgChart.GetImageAlign() {number}, gets the alignment of the node's image.
 oOrgChart.ImageAlign {number}, gets the alignment of the node's image.

where oOrgChart is an instance of OrgChart control
GetImageAlign

GetImageSize() → {any}

The GetImageSize() method gets 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.
Returns:
Returns the size, range of limits the node's image is displayed as explained:
  • {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.
Type
any
Example
The following statements are equivalent:

 oOrgChart.GetImageSize() {number}, gets the size of the node's image.
 oOrgChart.ImageSize {number}, gets the size of the node's image.

where oOrgChart is an instance of OrgChart control
GetImageSize
The GetLink() method gets the attributes of the link between a node and its descendant nodes. It 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.
Returns:
Returns the attributes of the link between a node and its descendant nodes.
Type
DisplayLinkType
Example
The following statements are equivalent:

 oOrgChart.GetLink() {DisplayLinkType}, returns the attributes of the link between a node and its descendant nodes
 oOrgChart.Link {DisplayLinkType}, returns the attributes of the link between a node and its descendant nodes

where oOrgChart is an instance of the OrgChart control.
GetLink

GetLinka() → {DisplayLinkType}

The GetLinka() method gets the attributes of the link between a node and its assistant nodes. It 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.
Returns:
Returns the attributes of the linka between a node and its assistant-nodes.
Type
DisplayLinkType
Example
The following statements are equivalent:

 oOrgChart.GetLinka() {DisplayLinkType}, gets the attributes of the link between a node and its assistant nodes
 oOrgChart.Linka {DisplayLinkType}, gets the attributes of the link between a node and its assistant nodes

where oOrgChart is an instance of the OrgChart control.
GetLinka

GetLinkg() → {DisplayLinkType}

The GetLinkg() method gets the attributes of the link between a node and its group nodes. It 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.
Returns:
Returns the attributes of the linkg between a node and its group-nodes.
Type
DisplayLinkType
Example
The following statements are equivalent:

 oOrgChart.GetLinkg() {DisplayLinkType}, gets the attributes of the link between a node and its group nodes
 oOrgChart.Linkg {DisplayLinkType}, gets the attributes of the link between a node and its group nodes

where oOrgChart is an instance of the OrgChart control.
GetLinkg

GetLocked() → {boolean}

The GetLocked() method determines whether the control is locked (protected) or unlocked. 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.
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
boolean
Example
The following statements are equivalent:

 oOrgChart.GetLocked() {boolean}, indicates whether the control is locked(protected) or unlocked
 oOrgChart.Locked {boolean}, indicates whether the control is locked(protected) or unlocked

where oOrgChart is an instance of OrgChart control
GetLocked

GetMargins() → {object}

The GetMargins() method gets 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.
Returns:
Returns an object of {x,y,indent,border} type that specifies the horizontal and vertical distance between nodes, where:
  • 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.

Type
object
Example
The following statements are equivalent:

 oOrgChart.GetMargins() {object}, gets the horizontal and vertical distance between nodes
 oOrgChart.Margins {object}, gets the horizontal and vertical distance between nodes

where oOrgChart is an instance of OrgChart control
GetMargins

GetNodes() → {string}

The GetNodes() method gets 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.
Returns:
Returns the control's hierarchy as a string-representation.

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]
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetNodes() {string}, gets the control's hierarchy as a string-representation
 oOrgChart.Nodes {string}, gets the control's hierarchy as a string-representation

where oOrgChart is an instance of the OrgChart control.
GetNodes

GetOptions() → {OrgChart.Options}

The GetOptions() method returns the control's current options as an object of OrgChart.Options. This type represents a set of configurable settings that control the behavior and appearance of the control. You can apply these options either by setting the Options property directly or by using the SetOptions() method to update one or more options programmatically at runtime.

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

allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
is associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
which means that the following statements are equivalent:
oOrgChart.Options = {allowActions: "scroll"}
oOrgChart.SetOptions({allowActions: "scroll"})
oOrgChart.AllowActions = "scroll"
oOrgChart.SetAllowActions("scroll")
where oOrgChart is an object of OrgChart type

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.

Returns:
An object of OrgChart.Options that indicates the options to display the control.
Type
OrgChart.Options
Example
The following statements are equivalent:

 oOrgChart.GetOptions() {object}, gets the current options of the control as an object of OrgChart.Options type
 oOrgChart.Options {object}, gets or sets the current options of the control as an object of OrgChart.Options type

where oOrgChart is a reference to the OrgChart control.
GetOptions

GetPad() → {number|Array.<number>|string}

The GetPad() method gets 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.
Returns:
Returns a value that could be:
  • {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
Type
number | Array.<number> | string
Example
The following statements are equivalent:

 oOrgChart.GetPad() {number|number[]|string}, gets the control's padding or the space between node's content and its borders
 oOrgChart.Pad {number|number[]|string}, gets the control's padding or the space between node's content and its borders

where oOrgChart is an instance of OrgChart control
GetPad

GetReadOnly() → {string}

The GetReadOnly() method indicates whether the control is read-only. When ReadOnly is set to true, users can select nodes but cannot modify the hierarchy (the AllowActions property includes the "move" action, which normally allows users to drag and drop nodes between parents). When ReadOnly is 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.
Since:
  • 1.8
Returns:
Returns true, if the control is read-only
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetReadOnly() {boolean}, indicates whether the control is read-only
 oOrgChart.ReadOnly {boolean}, indicates whether the control is read-only

where oOrgChart is an instance of OrgChart control
GetReadOnly

GetScrollBarsRoot() → {string}

The GetScrollBarsRoot() method gets 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.
Returns:
Indicates null, to prevent showing the position of home on the control's scroll bars, or a CSS color
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetScrollBarsRoot() {string}, gets the color used to highlight the root node's position on the control's scroll bars
 oOrgChart.ScrollBarsRoot {string}, gets the color used to highlight the root node's position on the control's scroll bars

where oOrgChart is an instance of the control
GetScrollBarsRoot

GetSelection() → {null|Node|Array.<Node>}

The GetSelection() method gets 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).
Returns:
Returns null, a Node type or an array of [Node] type that specifies the list of nodes being selected within the control
Type
null | Node | Array.<Node>
Example
The following statements are equivalent:

 oOrgChart.GetSelection() {Node|Node[]}, returns the control's selection
 oOrgChart.Selection {Node|Node[]}, returns the control's selection

where oOrgChart is an instance of OrgChart control
GetSelection

GetShapes() → {string}

The GetShapes() method gets 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.
Returns:
A string expression that defines the shapes each part of the control can display.

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
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetShapes() {string}, returns a string expression that defines the shapes each part of the control can display
 oOrgChart.Shapes {string}, returns a string expression that defines the shapes each part of the control can display

where oOrgChart is an instance of the OrgChart control.
GetShapes

GetShow() → {NodeTypeEnum}

The GetShow() method gets 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.
Returns:
Returns null (no filter), one or a combination of more flags of NodeTypeEnum type that defines the type of nodes the chart displays

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
Type
NodeTypeEnum
Example
The following statements are equivalent:

 oOrgChart.GetShow() {NodeTypeEnum}, returns the type of nodes the chart displays
 oOrgChart.Show {NodeTypeEnum}, returns the type of nodes the chart displays

where oOrgChart is an instance of OrgChart control
GetShow

GetShowExpandGlyphs() → {NodeTypeEnum}

The GetShowExpandGlyphs() method 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 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.
Returns:
Returns null (no effect), one or a combination of more flags of NodeTypeEnum type that defines the type of nodes for who the expand/collapse glyphs are visible

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
Type
NodeTypeEnum
Example
The following statements are equivalent:

 oOrgChart.GetShowExpandGlyphs() {NodeTypeEnum}, returns the type of nodes for who the expand/collapse glyphs are visible
 oOrgChart.ShowExpandGlyphs {NodeTypeEnum}, returns the type of nodes for who the expand/collapse glyphs are visible

where oOrgChart is an instance of OrgChart control
GetShowExpandGlyphs
The GetShowLinks() method 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.
Returns:
Returns an exontrol.ShowLinksEnum expression that specifies whether the links between nodes are visible or hidden

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.
Type
exontrol.ShowLinksEnum
Example
The following statements are equivalent:

 oOrgChart.GetShowLinks() {exontrol.ShowLinksEnum}, returns an exontrol.ShowLinksEnum expression that specifies whether the links between nodes are visible or hidden
 oOrgChart.ShowLinks {exontrol.ShowLinksEnum}, returns an exontrol.ShowLinksEnum expression that specifies whether the links between nodes are visible or hidden

where oOrgChart is an instance of the OrgChart control.
GetShowLinks

GetSingleExpandGlyphs() → {boolean}

The GetSingleExpandGlyphs() method specifies whether a node displays a single or multiple expand/collapse glyphs. The ShowExpandGlyphs property controls which types of nodes display glyphs, and the ExpandGlyphSize property 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. This property can override the chart's default settings for that node and its descendants, enabling customized display of glyphs within the same chart.
Returns:
Returns true if the node displays a single expand/collapse glyphs.
Type
boolean
Example
The following statements are equivalent:

 oOrgChart.GetSingleExpandGlyphs() {boolean}, returns true if the node displays a single expand/collapse glyphs
 oOrgChart.SingleExpandGlyphs {boolean}, returns true if the node displays a single expand/collapse glyphs

where oOrgChart is an instance of OrgChart control
GetSingleExpandGlyphs

GetSingleSel() → {OrgChart.SingleSelEnum}

The GetSingleSel() method 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.
Returns:
Returns an OR combination of exontrol.OrgChart.SingleSelEnum flags that specifies how to select notes 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.
Type
OrgChart.SingleSelEnum
Example
The following statements are equivalent:

 oOrgChart.GetSingleSel() {number}, returns an OR combination of exontrol.OrgChart.SingleSelEnum flags that specifies how to select notes
 oOrgChart.SingleSel {number}, returns an OR combination of exontrol.OrgChart.SingleSelEnum flags that specifies how to select notes

where oOrgChart is an instance of OrgChart control
GetSingleSel

GetSize() → {any}

The GetSize() method gets 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.
Returns:
Returns the size, range of limits the node's caption is displayed as explained:
  • {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)
Type
any
Example
The following statements are equivalent:

 oOrgChart.GetSize() {any}, gets the size of the node's caption.
 oOrgChart.Size {any}, gets the size of the node's caption.

where oOrgChart is an instance of OrgChart control
GetSize

GetSmooth() → {number}

The GetSmooth() method gets 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. The Smooth() method smoothly transitions the control from the current layout to a new layout, applying gradual changes rather than an immediate switch.
Returns:
Returns the time in ms the control goes from one layout to another.
Type
number
Example
The following statements are equivalent:

 oOrgChart.GetSmooth() {number}, returns the time in ms the control goes from one layout to another
 oOrgChart.Smooth {number}, returns the time in ms the control goes from one layout to another

where oOrgChart is an instance of OrgChart control
GetSmooth

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control. The GetTfi() method returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. Correspondingly, the Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords 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 result 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 result as {object} can include 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.
Type
string | object
Example
The following statements are equivalent:

  oOrgChart.GetTfi() {string}, returns the control's font attributes as a string such as "b monospace 16"
  oOrgChart.Tfi {string}, returns the control's font attributes as a string such as "b monospace 16"

where oOrgChart is an instance of OrgChart control
GetTfi

GetWheelChange() → {number}

The GetWheelChange() method 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.

Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
Type
number
Example
The following statements are equivalent:

 oOrgChart.GetWheelChange() {number}, returns the amount the control scrolls when the user rolls the mouse wheel
 oOrgChart.wheelChange {number}, returns the amount the control scrolls when the user rolls the mouse wheel

where oOrgChart is an instance of OrgChart control
GetWheelChange

GetZoom() → {number}

The GetZoom() method 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. By default, the Zoom property is set to null, indicating a normal view (100% zoom).
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Type
number
Example
The following statements are equivalent:

 oOrgChart.GetZoom() {number}, gets the zoom factor of the control's content as a numeric value between 10 and 1000
 oOrgChart.Zoom {number}, gets the zoom factor of the control's content as a numeric value between 10 and 1000

where oOrgChart is an object of OrgChart type
GetZoom

GetZoomLevels() → {string}

The GetZoomLevels() method 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.
Returns:
Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom.
Type
string
Example
The following statements are equivalent:

 oOrgChart.GetZoomLevels() {string}, gets the control's zoom-levels as a comma-separated string of numeric values (e.g., "50,100,150,200")
 oOrgChart.ZoomLevels {string}, gets the control's zoom-levels as a comma-separated string of numeric values (e.g., "50,100,150,200")

where oOrgChart is an object of OrgChart type
GetZoomLevels

Home()

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.
Example
oOrgChart.Home(), zooms to 100% and scrolls the control to origin (0,0)
Home

Node(key, oNodeopt) → {Node}

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.
Parameters:
Name Type Attributes Description
key any The key parameter can be any of the following: key {string}, Specifies the node's key or caption key {object}, Indicates an object of Node that specifies the node itself.
oNode Node <optional>
 Indicates an object of Node type to start searching from. If missing the control's root node is used instead. The Root property returns the root node of the chart.
Returns:
Returns null, if no node with specified key has been found, or an object of Node type
Type
Node
Example
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
Node

Refresh()

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.

Example
oOrgChart.Refresh(), refreshes the control
Refresh

RemoveSelection()

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.
Example
oOrgChart.RemoveSelection(), deletes selected-nodes (including all descendants)
RemoveSelection

SelectAll()

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.
Example
oOrgChart.SelectAll(), selects all nodes within the control
SelectAll

SetAlign(value)

The SetAlign() method sets 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
Parameters:
Name Type Description
value exontrol.AlignEnum Specifies the assistant/child-nodes' alignment relative to the node itself.
Example
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
SetAlign

SetAllowActions(value)

The SetAllowActions() method 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.
Parameters:
Name Type Description
value string Indicates the actions the user can perform once the control is clicked or touched.

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
Example
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.
SetAllowActions

SetCursors(value)

The SetCursors() method sets 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.
Parameters:
Name Type Description
value string A string expression that defines the mouse cursor to display when pointing over different parts of the control.

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
Example
"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"
SetCursors

SetEnsureOnExpand(value)

The SetEnsureOnExpand() method 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.
Parameters:
Name Type Description
value boolean A boolean expression that specifies whether the control scrolls its content to ensure that the node's descendants fits it.
Example
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.
SetEnsureOnExpand

SetExpandGlyphSize(value)

The SetExpandGlyphSize() method sets 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.
Parameters:
Name Type Description
value number A value that specifies the size to show the node's expand/collapse glyphs.
Example
0 {number}, displays no node's expand/collapse glyphs
24 {number}, specifies a size of 24x24 to display the node's expand/collapse glyphs
SetExpandGlyphSize

SetExpandOnDblClick(value)

The SetExpandOnDblClick() method 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.
Parameters:
Name Type Description
value boolean A boolean expression that indicates whether the node gets expanded as soon as the user double-clicks the node.
Example
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.
SetExpandOnDblClick

SetFilter(value)

The SetFilter() method 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"
Parameters:
Name Type Description
value string Indicates null (no filter), or a wild-character expression that defines the mask to match the node's plain caption. For instance "*a" indicates every caption that ends on `a`
Example
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"
SetFilter

SetFlow(value)

The SetFlow() method sets 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.
Parameters:
Name Type Description
value Layout.FlowEnum Specifies the control's flow/arrangement as a Layout.FlowEnum type (string).

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
Example
"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
SetFlow

SetFocus(key) → {Node}

The SetFocus() method sets 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.
Parameters:
Name Type Description
key any The key parameter can be 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
Returns:
Returns the node being focused.
Type
Node
Example
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)
SetFocus

SetFormatText(value)

The SetFormatText() method sets 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.
Parameters:
Name Type Description
value exontrol.DrawTextFormatEnum Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the node's caption.

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.
Example
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
SetFormatText

SetImageAlign(value)

The SetImageAlign() method sets 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.
Parameters:
Name Type Description
value number Defines the format to show the node's caption as explained:
  • 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
Example
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
SetImageAlign

SetImageSize(value)

The SetImageSize() method sets 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.
Parameters:
Name Type Description
value any Indicates the size of the node's image as explained:
  • {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.
Example
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
SetImageSize
The SetLink() method changes 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.
Parameters:
Name Type Description
value DisplayLinkType Specifies the attributes of the link between a node and its descendant nodes.
Example
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
SetLink

SetLinka(value)

The SetLinka() method changes 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.
Parameters:
Name Type Description
value DisplayLinkType Specifies the attributes of the linka between a node and its assistant-nodes.
Example
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
SetLinka

SetLinkg(value)

The SetLinkg() method changes 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.
Parameters:
Name Type Description
value DisplayLinkType Specifies the attributes of the linkg between a node and its group-nodes.
Example
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
SetLinkg

SetLocked(value)

The SetLocked() method 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.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is locked(protected) or unlocked.
Example
false {boolean}, unlocks the control (can select any node)
true {boolean}, locks the control (can't select any node)
SetLocked

SetMargins(value)

The SetMargins() method sets 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.

Parameters:
Name Type Description
value object Returns an object of {x,y,indent,border} type that specifies the horizontal and vertical distance between nodes.
Example
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
SetMargins

SetNodes(value)

The SetNodes() method sets 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.
Parameters:
Name Type Description
value string Specifies the string representation of the control's hierarchy.

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]
Example
"" {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"
SetNodes

SetOptions(nOptions, bIncludeAllopt) → {boolean}

The SetOptions() method 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.

Parameters:
Name Type Attributes Description
nOptions OrgChart.Options Specifies an object of OrgChart.Options type that indicates the new options to apply.
bIncludeAll boolean <optional>
 Indicates whether all fields of nOptions are included in the element's oOpts object.
Returns:
Returns true, if there were options applied to the element
Type
boolean
Example
{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
SetOptions

SetPad(value)

The SetPad() method sets 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.
Parameters:
Name Type Description
value number | Array.<number> | string Specifies a value that could be:
  • {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
Example
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
SetPad

SetReadOnly(value)

The SetReadOnly() method sets the control to be 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.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is read-only.
Since:
  • 1.8
Example
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
SetReadOnly

SetScrollBarsRoot(value)

The SetScrollBarsRoot() method sets 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.
Parameters:
Name Type Description
value string Specifies null, to prevent showing the position of home on the control's scroll bars, or a CSS color.
Example
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
SetScrollBarsRoot

SetSelection(value)

The SetSelection() method sets 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).
Parameters:
Name Type Description
value any The value can be 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 {Node}, specifies an object of Node type
  • value {array}, specifies an array of [Node], [string], [string | Node] type
Example
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
SetSelection

SetShapes(value)

The SetShapes() method sets 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.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display.

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
Example
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
SetShapes

SetShow(value)

The SetShow() method sets 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.
Parameters:
Name Type Description
value NodeTypeEnum Specifies null (no filter), one or a combination of more flags of NodeTypeEnum type that defines the type of nodes the chart displays

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
Example
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)
SetShow

SetShowExpandGlyphs(value)

The SetShowExpandGlyphs() method 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.
Parameters:
Name Type Description
value NodeTypeEnum Specifies null (no effect), one or a combination of more flags of NodeTypeEnum type that defines the type of nodes for who the expand/collapse glyphs are visible

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
Example
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
SetShowExpandGlyphs
The SetShowLinks() method specifies 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.
Parameters:
Name Type Description
value exontrol.ShowLinksEnum An exontrol.ShowLinksEnum expression that specifies whether the links between nodes are visible or hidden

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.
Example
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
SetShowLinks

SetSingleExpandGlyphs(value)

The SetSingleExpandGlyphs() method 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.
Parameters:
Name Type Description
value boolean A boolean expression that specifies whether the node shows one or multiple expand/collapse glyphs.
Example
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)
SetSingleExpandGlyphs

SetSingleSel(value)

The SetSingleSel() method 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.
Parameters:
Name Type Description
value OrgChart.SingleSelEnum An OR combination of exontrol.OrgChart.SingleSelEnum flags to specify how user can select notes

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.
Example
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.
SetSingleSel

SetSize(value)

The SetSize() method sets 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.
Parameters:
Name Type Description
value any Defines the size, range of limits the node's caption is displayed as explained:
  • {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)
Example
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
SetSize

SetSmooth(value)

The SetSmooth() method sets 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. The Smooth() method smoothly transitions the control from the current layout to a new layout, applying gradual changes rather than an immediate switch.
Parameters:
Name Type Description
value number Indicates the time in ms the control goes from one layout to another.
Example
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.
SetSmooth

SetTfi(value)

The SetTfi() method sets 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.
Parameters:
Name Type Description
value string | object Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

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.
Example
null {null}, the tfi field is ignored
"bold monospace 16 &lt;fg blue&gt;" {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
SetTfi

SetWheelChange(value)

The SetWheelChange() method changes 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.

Parameters:
Name Type Description
value number A value that specifies the amount the control scrolls when the user rolls the mouse wheel.
Example
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)
SetWheelChange

SetZoom(value)

The SetZoom() method 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.
Parameters:
Name Type Description
value number A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Example
null {null}, Specifies normal-view (100%)
150 {number}, Indicates that the control's content is magnfied to 150%
SetZoom

SetZoomLevels(value)

The SetZoomLevels() method 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.
Parameters:
Name Type Description
value string specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom.
Example
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%
SetZoomLevels

Shuffle(ratio)

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.
Parameters:
Name Type Description
ratio number specifies how far each element is randomized relative to the current size of the layout. For instance, 0 indicates that the element is not moved/shuffled, while 1, indicates that the element can randomize its position up to one width/height.
Example
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();
})
Shuffle

Smooth(callback, thisArg, callbackLayoutopt)

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.
Parameters:
Name Type Attributes Description
callback callback Indicates a callback function that generates the new layout for the control, such as expanding/collapsing a node, removing or adding new nodes to the control. The callback is provided with no arguments.
thisArg any Specifies the value of this keyword for callback and callbackLayout functions.
callbackLayout callback <optional>
 Specifies a callback function, that allows you to update the visible-objects before/after the smooth-transition (not required). The callbackLayout function provides the following parameters:
rtClient {array}, indicates the control's client area as an array of [x,y,width,height] type
rgDiff {object}, indicates an object of exontrol.Arr([Node]) type that holds difference-nodes or nodes that are missing from a layout but present in the other
oLayout {Layout}, specifies on object of Layout type that defines the control's layout before the action is executed
oScroll {object}, holds the control's scroll-position as an object of {x,y} type, before the action is executed
rgVO {object}, holds the objects being visible before action, as exontrol.M1([Node | {node: Node, expandType: NodeTypeEnum}]) type
oNewLayout {Layout}, specifies on object of Layout type that defines the control's layout after the action is executed
oNewScroll {object}, holds the control's scroll-position as an object of {x,y} type, after the action is executed
rgNewVO {object}, holds the objects being visible after action, as exontrol.M1([Node | {node: Node, expandType: NodeTypeEnum}]) type
Example
The following sample shows how to use the Smooth() method:

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

where oOrgChart is an object of OrgChart type
Smooth

Soom(zoomTo, oPointAbs, rgrOriginopt)

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.
Parameters:
Name Type Attributes Description
zoomTo number Indicates a numeric value that defines the target-zoom factor as a value between 10 and 1000 (no zoom if null or undefined).
oPointAbs object Specifies an object of {x,y} or array as [x,y] type that specifies the absolute-coordinates of the point to scroll into the client at rgrOrigin relative-position.
rgrOrigin Array.<number> <optional>
 Specifies a two-elements array of [x,y] type that specifies the ratio on x and y axis to determine the position of the oPointA relative to the view page. The x and y values should be value between 0 and 1.
Example
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
Soom

ToggleExpandNode(key, nExpandTypeopt)

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.
Parameters:
Name Type Attributes Description
key any The key parameter can be any of the following:
  • {string}, Specifies the node's key or caption (@since 5.3)
  • {object}, Indicates an object of Node that specifies the node itself
nExpandType NodeTypeEnum <optional>
 Specifies 0 (no effect), null/missing/undefined (indicates all node's descendants), or a combination of one or more valuef of NodeTypeEnum type that determines the type of descendant-nodes.
Example
oOrgChart.oCV.ToggleExpandNode(oOrgChart.Root), toggles the expand/collapse state of the root node and all its descendant nodes
ToggleExpandNode

UnselectAll()

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.
Example
oOrgChart.UnselectAll(), clears the control's selection
UnselectAll

Unshuffle()

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.
Example
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();
})
Unshuffle

Events

onanchorclick

The onanchorclick() event occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The onclick event is triggered when the user clicks a node, but it is not triggered when the user clicks the expand/collapse glyphs.

The onanchorclick event carries the following information:

  • The anchor's identifier (null if no identifier has been specified for the anchor, or the anchor's identifier)
  • The anchor's options (null if no options has been specified for the anchor, or the anchor's options)
Parameters:
Name Type Description
oEvent object Holds information about anchor being clicked.
Properties
Name Type Description
id string specifies null (no identifier has been specified for the anchor) or the anchor's identifier.
options string specifies null (no options has been specified for the anchor) or the anchor's options.
Since:
  • 2.2
Example
The following samples display information about the element being clicked:

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

or

oOrgChart.on("anchorclick", function (oEvent)
{
 console.log(oEvent);
})

or

oOrgChart.oCV.onanchorclick = function (oEvent)
{
 console.log(oEvent);
}

where oOrgChart is an object of Tree type, oCV is member of Tree type, of CV type.
onanchorclick

onchange

The onchange event notifies the listeners that an object has changed. The onchange event is triggered when a node gets expanded or collapsed. The onclick event is triggered when the user clicks a node, but it is not triggered when the user clicks the expand/collapse glyphs. The onanchorclick event is triggered when the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element), even if the user clicks an anchor that belongs to a node's area.

The onchange event carries the following information:

  • The object being changed (expanded). The type of the object is based on the action it occured
  • The name of the action, as one of the following:
    • "expand-node" {string}, notifies that a node has been expanded or collapsed (the object refers to a Node type)
Parameters:
Name Type Description
oEvent object specifies an object of {object,action} type, that holds information about the control's object being changed.
Properties
Name Type Description
object object The object field specifies the object being changed (expanded, checked, ...). The type of the object is based on the action it occured.
action string The action field specifies the name of the action, as one of the following:
  • "expand-node" {string}, notifies that a node has been expanded or collapsed (the object refers to a Node type)
Since:
  • 1.8
Example
The following samples display information about the change once it occurs:

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

or

oOrgChart.on("change", function (oEvent)
{
 console.log(oEvent);
})

or

oOrgChart.oCV.onchange = function (oEvent)
{
 console.log(oEvent);
}

where oOrgChart is an object of OrgChart type. The oCV is member of OrgChart type, of CV type.
onchange

onclick

The onclick event occurs once the user clicks or double-clicks a node. The event is not triggered when the user clicks the expand/collapse glyphs, but it is triggered when the user clicks the node's area (even if the node is collapsed). The onchange event ("expand-node") is triggered once the node gets expanded or collapsed. The onanchorclick event is triggered when the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element), even if the user clicks an anchor that belongs to a node's area.

The onclick event carries the following information:

  • The node being clicked (null if the user clicks an empty area, or the node being clicked)
  • Whether a click or "double-click" event occurs
  • Which buttons are pressed
  • Which modifier keys are pressed (ALT, CTRL, META and SHIFT)
Parameters:
Name Type Description
oEvent object Specifies an object of {node, dblClick, button, modifiers} type, that holds information about the node being clicked.
Properties
Name Type Description
node Node The node field specifies null, or the node being clicked.
dblClick boolean The dblClick field indicates whether a click or double-click event occurs.
button number The button field specifies which buttons are pressed. A number representing of the following values:
  • 1 : Primary button (usually left)
  • 2 : Secondary button (usually right)
  • 4 : Auxilary button (usually middle or mouse wheel button)
modifiers number The modifiers field specifies the modifier keys for the current event. A number that indicates a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys.
Example
The following samples display information about the node being clicked:

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

or

oOrgChart.on("click", function (oEvent)
{
 console.log(oEvent);
})

or
oOrgChart.oCV.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oOrgChart is an object of OrgChart type, oCV is member of OrgChart type, of CV type.
onclick

onscroll

The onscroll event notifies your application once the view has been scrolled. The ScrollBars property specifies which scroll bars the control displays. The user can right-click on the scroll bars over the layout marker to automatically scroll the control's content to the current layout position. Similarly, the user can scroll the content by dragging the layout marker along the scroll bars. The onscroll event is triggered whenever the view is scrolled by any of these methods, as well as by using the mouse wheel or touch gestures.

The onscroll event carries the following information:

  • The view, where the scroll occurs
  • The view's scroll that has changed as 0(vertical), 1(horizontal)
  • The scroll's value
Parameters:
Name Type Description
oEvent object Specifies an object of {view,type,value} that holds information about the view's scroll that has been changed.
Properties
Name Type Description
view CV specifies the view, where the scroll occurs.
type exontrol.SB.ModeEnum specifies the view's scroll that has changed as 0(vertical), 1(horizontal).
value number specifies the scroll's value as a number.
Since:
  • 1.8
Example
The following samples display the view's scroll position once it is changed:

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

or

oOrgChart.on("scroll", function (oEvent)
{
 console.log(oEvent);
})

or

oOrgChart.oCV.onscroll = function (oEvent)
{
 console.log(oEvent);
}

where oOrgChart is an object of Tree type. The oCV is member of Tree type, of CV type.
onscroll

onselchange

The onselchange event notifies your application once the control's selection has been changed. The onselchange event occurs when user clicks on a node to select it, or clicks outside of the nodes to clear the selection. The onselchange event is also triggered when you change the selection using the SelectAll or UnselectAll method, or by setting the Selection property. The event provides the current selection as an argument, which can be null (indicating that there is no selection), a Node object (indicating a single-node selection), or an array of Node objects (indicating multiple selected nodes).
Parameters:
Name Type Description
oEvent null | Node | Array.<Node> Specifies the nodes being selected as one of the following:
  • oEvent {null}, indicates that the control has no selected nodes
  • oEvent {Node}, indicates an object of Node type that defines the control's single-node selected
  • oEvent {Node[]}, specifies an array of [Node] type that holds all selected nodes within the control
Example
The following samples display the control's selection once it changes:

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

or

oOrgChart.on("selchange", function (oEvent)
{
 console.log(oEvent);
})

or

oOrgChart.oCV.onselchange = function (oEvent)
{
 console.log(oEvent);
}

where oOrgChart is an object of OrgChart type, oCV is member of OrgChart type, of CV type.
onselchange