CV class (OrgChart)

CV(oOrgChart)

new CV(oOrgChart)

Defines the view of the OrgChart control. The oCV member of OrgChart type holds the view of the control as an object of CV type.
Parameters:
Name Type Description
oOrgChart OrgChart Indicates the owner control, as an object of OrgChart type (@since 1.8)
CV

Methods

EnsureVisibleClient(clientA, bAllowChangeScale, bNearestFit)

The EnsureVisibleClient() method ensures that the giving client fits the control's client area.
Parameters:
Name Type Description
clientA object The client parameter could be any of the following:
  • clientA {number[]}, 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
  • clientA {number[]}, 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
bAllowChangeScale boolean Specifies whether the method updates the control's scale/zoom-factor to ensure full-fit the client
bNearestFit boolean Ensures that corner of the rtObject nearest the window's client area fits it (it has effect only if the size of the rtObject is greater than size of the window's client area)
EnsureVisibleClient

EnsureVisibleNode(key)

The EnsureVisibleNode() method ensures that the giving node fits the control's visible area (it expands all parents of node)
Parameters:
Name Type Description
key any The key parameter can be any of the following:
  • key {object}, Indicates an object of Node that specifies the node itself
  • key {string}, Specifies the node's key of caption
EnsureVisibleNode

EnsureVisibleSelection()

The EnsureVisibleSelection() method 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
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
FitToClient

GetAlign() → {exontrol.AlignEnum}

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

GetAllowActions() → {string}

The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched
Returns:
Returns the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag
    • "zoom", zooms the control's content at dragging-point
    • "fit", fits the drag-area into the control's client area
    • "select", selects nodes by drag
    • "move", moves nodes to a new parent or position by drag
    • "drag-drop", carries out the 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 holds information about the mouse/touch event once the node has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type.
    "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
GetAllowActions

GetCanvas() → {HTMLCanvasElement}

The GetCanvas() method gets the canvas element, the control is running on.
Returns:
Returns the HTMLCanvasElement object the control is running on.
Type
HTMLCanvasElement
GetCanvas

GetCanvasRect() → {Array.<number>}

The GetCanvasRect() method returns the canvas's client rectangle.
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>
GetCanvasRect

GetClientRect() → {array}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
array
GetClientRect

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors 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 cursors property supports any of the following parts:
  • "node" (node), indicates any node
  • "nodea" (assistant-node), indicates assistant-nodes
  • "nodeg" (group-node), indicates group-nodes
  • "expand" (expand/collapse), indicates node's expand/collapse glyphs
  • "anchor" (hyperlink), indicates the anchor-element (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
  • "select" (selection), indicates selected nodes
  • "drag-drop", defines the cursor while the node is being dragged using the "drag-drop" action
Type
string
GetCursors

GetEnsureOnExpand() → {boolean}

The GetEnsureOnExpand() method specifies whether the control scrolls its content to ensure that the node's descendants fits it.
Returns:
Returns true if the control scrolls its content to ensure that the node's descendants fits the control's client area.
Type
boolean
GetEnsureOnExpand

GetExpandGlyphSize() → {number}

The GetExpandGlyphSize() method specifies the size to show the node's expand/collapse glyphs.
Returns:
Returns the size to show the node's expand/collapse glyphs.
Type
number
GetExpandGlyphSize

GetExpandOnDblClick() → {boolean}

The GetExpandOnDblClick() method indicates whether the node gets expanded as soon as the user double-clicks the node.
Returns:
Returns true if the node gets expanded as soon as the user double-clicks the node.
Type
boolean
GetExpandOnDblClick

GetFilter() → {string}

The GetFilter() method specifies a wild-character expression that defines the mask to match the node's plain caption. 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
GetFilter

GetFlow() → {Layout.FlowEnum}

The GetFlow() method specifies the flow and arrangement of nodes within the control.
Returns:
Returns the chart's flow/arrangement as a Layout.FlowEnum type (string) The Layout.FlowEnum type defines the following values:
  • 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
GetFlow

GetFocus() → {Node}

The GetFocus() method returns the control's focus node (which is the root if no selection is available)
Returns:
Returns an object of Node type that specifies the control's focus node
Type
Node
GetFocus

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies the format to display the node's caption.
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
GetFormatText

GetImageAlign() → {number}

The GetImageAlign() method specifies the alignment of the node's image.
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
GetImageAlign

GetImageSize() → {any}

The GetImageSize() method defines the size of the node's image.
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
GetImageSize

GetInsideRect(bUnscaled) → {Array.<number>}

The GetInsideRect() method returns the control's view page ( the control's client area that excludes the borders )
Parameters:
Name Type Description
bUnscaled boolean Specifies whether the width/height are scalled to current scale
Returns:
Returns an array of [x,y,width,height] type that specifies the control's view page ( the control's client area that excludes the borders )
Type
Array.<number>
GetInsideRect
The GetLink() method gets the attributes of the link between a node and its descendant nodes.
Returns:
Returns the attributes of the link between a node and its descendant nodes.
Type
DisplayLinkType
GetLink

GetLinka() → {DisplayLinkType}

The GetLinka() method gets the attributes of the linka between a node and its assistant-nodes.
Returns:
Returns the attributes of the linka between a node and its assistant-nodes.
Type
DisplayLinkType
GetLinka

GetLinkg() → {DisplayLinkType}

The GetLinkg() method gets the attributes of the linkg between a node and its group-nodes.
Returns:
Returns the attributes of the linkg between a node and its group-nodes.
Type
DisplayLinkType
GetLinkg

GetLocked() → {boolean}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
boolean
GetLocked

GetMargins() → {object}

The GetMargins() method indicates the horizontal/vertical/indent distance between nodes.
Returns:
Returns an object of {x,y,indent,border} type that specifies the horizontal and vertical distance between nodes.
Type
object
GetMargins

GetNodes() → {string}

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

GetOptions() → {OrgChart.Options}

The GetOptions() method returns the current options of the control.
Returns:
An object of OrgChart.Options that indicates the options to display the control.
Type
OrgChart.Options
GetOptions

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

The GetPad() method specifies the space between node's content and its borders.
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
GetPad

GetReadOnly() → {string}

The GetReadOnly() method specifies whether the control is read-only
Since:
  • 1.8
Returns:
Returns true, if the control is read-only
Type
string
GetReadOnly

GetScrollBarsRoot() → {string}

The GetScrollBarsRoot() method specifies the color to highlight the position of home on the control's scroll bars
Returns:
Indicates null, to prevent showing the position of home on the control's scroll bars, or a CSS color
Type
string
GetScrollBarsRoot

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

The GetSelection() method returns the control's selection as null, an Node type or an array of [Node] type.
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>
GetSelection

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
Returns:
A string expression that defines the shapes each part of the control can display. The format of shapes 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:
  • "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
  • "expand", specifies the visual appearance for expand/collapse glyphs
  • "select" (selection), defines the visual appearance for selected 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
  • "frameDrag", specifies the visual appearance to display a frame while dragging the nodes
  • "multiSel", specifies the visual appearance to show the count of multiple-selected items
Type
string
GetShapes

GetShow() → {NodeTypeEnum}

The GetShow() method specifies the type of nodes the chart displays (filters the nodes by type)
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
GetShow

GetShowExpandGlyphs() → {NodeTypeEnum}

The GetShowExpandGlyphs() method specifies whether the expand/collapse glyphs is shown for different type of nodes.
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
GetShowExpandGlyphs
The GetShowLinks() method specifies whether the control's links are shown or hidden.
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
  • 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), shows rectangular cross-links
  • exCrossTriangle (0x20), shows triangular cross-links
  • exCrossMixt (0x60), shows mixt cross-links
Type
exontrol.ShowLinksEnum
GetShowLinks

GetSingleExpandGlyphs() → {boolean}

The GetSingleExpandGlyphs() method specifies whether the node displays a single or multiple expand/collapse glyphs.
Returns:
Returns true if the node displays a single expand/collapse glyphs.
Type
boolean
GetSingleExpandGlyphs

GetSingleSel() → {exontrol.OrgChart.SingleSelEnum}

The GetSingleSel() method specifies whether the control supports single, multiple, toggle selection.
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
exontrol.OrgChart.SingleSelEnum
GetSingleSel

GetSize() → {any}

The GetSize() method specifies the size, range of limits the node's caption is displayed.
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
GetSize

GetSmooth() → {number}

The GetSmooth() method defines the time in ms the control goes from one layout to another.
Returns:
Returns the time in ms the control goes from one layout to another.
Type
number
GetSmooth

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
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 mode as a value between 0 and 4
    • 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
GetTfi

GetViewRect() → {Array.<number>}

The GetViewRect() method returns the position of the owner canvas element within the document.
Returns:
Returns an array of [x,y,width,height] that specifies the position canvas element within the document.
Type
Array.<number>
GetViewRect

GetVisibleRect() → {Array.<number>}

The GetVisibleRect() method indicates the control's visible rectangle
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>
GetVisibleRect

GetWheelChange() → {number}

The GetWheelChange() method defines the amount the control scrolls when the user rolls the mouse wheel.
Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
Type
number
GetWheelChange

GetZoom() → {number}

The GetZoom() method defines the zoom factor of the control's content.
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Type
number
GetZoom

GetZoomLevels() → {string}

The GetZoomLevels() method defines the zoom-levels the user can magnify the control's 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
GetZoomLevels

Home()

The Home() method zooms to 100% and scrolls the control to origin (0,0)
Home

Node(key, oNodeopt) → {Node}

The Node(key, oNode) method gets the node giving its key, starting to look from oNode through all descendants
Parameters:
Name Type Attributes Description
key any The key parameter can be any of the following: key {object}, Indicates an object of Node that specifies the node itself key {string}, Specifies the node's key or caption
oNode Node <optional>
 Indicates an object of Node type to start searching from. If missing the control's root node is used instead.
Returns:
Returns null, if no node with specified key has been found, or an object of Node type
Type
Node
Node

Refresh()

The Refresh() method refreshes the entire control.
Refresh

RemoveSelection()

The RemoveSelection() method deletes selected-nodes (including all descendants)
RemoveSelection

SelectAll()

The SelectAll() method selects all elements within the control.
SelectAll

SetAlign(value)

The SetAlign() method changes the assistant/child-nodes' alignment relative to the node itself.
Parameters:
Name Type Description
value exontrol.AlignEnum Specifies the assistant/child-nodes' alignment relative to the node itself. 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
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
Parameters:
Name Type Description
value string Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag
    • "zoom", zooms the control's content at dragging-point
    • "fit", fits the drag-area into the control's client area
    • "select", selects nodes by drag
    • "move", moves nodes to a new parent or position by drag
    • "drag-drop", carries out the 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 holds information about the mouse/touch event once the node has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type.
    "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

SetCanvas(canvas, localCanvas)

The SetCanvas() method changes the control's canvas where it runs.
Parameters:
Name Type Description
canvas any A string that indicates the indetifier of the element within the document, or a HTMLCanvasElement reference
localCanvas boolean Specifies whether the canvas is used localy without requesting the canvas to handle the control itself.
SetCanvas

SetClientRect(client)

The SetClientRect() method defines a client area for the control.
Parameters:
Name Type Description
client any The client parameter indicates the control's client area as:
  • array of [x,y,width,height] type that specifies the control's client area
  • string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
  • HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
SetClientRect

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.
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 cursors 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 cursors property supports any of the following parts:
  • "node" (node), indicates any node
  • "nodea" (assistant-node), indicates assistant-nodes
  • "nodeg" (group-node), indicates group-nodes
  • "expand" (expand/collapse), indicates node's expand/collapse glyphs
  • "anchor" (hyperlink), indicates the anchor-element (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
  • "select" (selection), indicates selected nodes
  • "drag-drop", defines the cursor while the node is being dragged using the "drag-drop" action
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 indicates whether the control scrolls its content to ensure that the node's descendants fits it.
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 changes the size to show the node's expand/collapse glyphs.
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 indicates whether the control scrolls its content to ensure that the node's descendants fits it.
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 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 changes the control's flow and arrangement of the nodes.
Parameters:
Name Type Description
value Layout.FlowEnum Specifies the control's flow/arrangement as a Layout.FlowEnum type (string). The Layout.FlowEnum type defines the following values:
  • 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 changes the control's selection/focus to the node with the giving key (if not found, it focuses/selects the root node)
Parameters:
Name Type Description
key any The key parameter can be any of the following:
  • key {object}, Indicates an object of Node that specifies the node itself
  • key {string}, Specifies the node's key or caption
Returns:
Returns the node being focused.
Type
Node
SetFocus

SetFormatText(value)

The SetFormatText() method changes the format to display the node's caption.
Parameters:
Name Type Description
value exontrol.DrawTextFormatEnum Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the node's caption. A combination of one or more exontrol.DrawTextFormatEnum flags 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 changes the alignment of the node's image.
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 changes the size of the node's image.
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.
Parameters:
Name Type Description
value DisplayLinkType Specifies the attributes of the link between a node and its descendant nodes.
SetLink

SetLinka(value)

The SetLinka() method changes the attributes of the linka between a node and its assistant-nodes.
Parameters:
Name Type Description
value DisplayLinkType Specifies the attributes of the linka between a node and its assistant-nodes.
SetLinka

SetLinkg(value)

The SetLinkg() method changes the attributes of the linkg between a node and its group-nodes.
Parameters:
Name Type Description
value DisplayLinkType Specifies the attributes of the linkg between a node and its group-nodes.
SetLinkg

SetLocked(value)

The SetLocked() method locks or unlocks the control.
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 changes the horizontal and/or vertical and/or indent distance between nodes.
Parameters:
Name Type Description
value object Returns an object of {x,y,indent,border} type that specifies the horizontal and vertical distance between nodes.
SetMargins

SetNodes(value)

The SetNodes() method builds the control's hierarchy from a string-representation.
Parameters:
Name Type Description
value string Specifies the string representation of the control's hierarchy. The format of the nodes'string representation 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 new options to the control
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
SetOptions

SetPad(value)

The SetPad() method changes the node's padding or the space between node's content and its borders.
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 field is used ([4,4])
  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 in read-only mode
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 defines the color to highlight the position of home on the control's scroll bars
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 changes the control's selection.
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
SetSelection

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display. The format of shapes 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:
  • "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
  • "expand", specifies the visual appearance for expand/collapse glyphs
  • "select" (selection), defines the visual appearance for selected 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
  • "frameDrag", specifies the visual appearance to display a frame while dragging the nodes
  • "multiSel", specifies the visual appearance to show the count of multiple-selected items
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 filters the nodes based on the type.
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 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.
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 NodeTypeEnum.exNodeChild {number}, shows the expand/collapse glyphs nodes of child type only
SetShowExpandGlyphs
The SetShowLinks() method shows or hides links between 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
  • 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), shows rectangular cross-links
  • exCrossTriangle (0x20), shows triangular cross-links
  • exCrossMixt (0x60), shows mixt cross-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.
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 changes the control's selection to single, multiple or toggle
Parameters:
Name Type Description
value exontrol.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 changes the size, range of limits the node's caption is displayed.
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
 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 changes the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed).
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 to apply on captions of the control.
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 mode as a value between 0 and 4
    • 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>" {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 control scrolls when the user rolls the mouse wheel.
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.
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 zoomLevels factor of the control's 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 elements within the control.
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.
Shuffle

Smooth(callback, thisArg, callbackLayoutopt)

The Smooth() method performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the first callback. The second callback allows you to re-arrange the layout before smooth transition is performed.
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
Smooth

Soom(zoomTo, oPointAbs, rgrOriginopt)

The Soom() method zooms or/and scrolls the control's content.
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
this.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position
 this.Soom(150, [0,0], [0,0]), zooms to 150% and brings the origin (0,0) at top-left corner
 this.Soom( null, this.ptCA( e.drag.current, true ), [1/2,1/2] ), scrolls the control's content to the center of the control
Soom

ToggleExpandNode(oNode, nExpandType)

The ToggleExpandNode() method expands the node if it is collapsed, or collapses it if it is expanded. A smooth transition from a layout to another is performed.
Parameters:
Name Type Description
oNode Node Indicates an object of Node type that specifies the node being expanded/collapsed
nExpandType NodeTypeEnum 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
ToggleExpandNode

UnselectAll()

The UnselectAll() method clears the control's selection.
UnselectAll

Unshuffle()

The Unshuffle() method restores the elements of the control in case they were shuffled.
Unshuffle

init(oOrgChart)

The init() method initializes the object
Parameters:
Name Type Description
oOrgChart OrgChart Indicates the owner control, as an object of OrgChart type (@since 1.8)
Since:
  • 1.8
init

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)
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.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() method notifies the listeners that an object has changed
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.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() method occurs once the user clicks or double-clicks a node
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.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() method notifies your application once the view has been scrolled.
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
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.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() method notifies your application once the control's selection has been changed
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.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