Node class (OrgChart)

The Align property defines the alignment of assistant and child nodes 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. If the Align property is not specified for a node, it inherits the alignment from its parent node or uses the default alignment defined by the OrgChart.Align property. The Align property may have no effect when the layout is set to a tree layout such as 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

null {null}, the node inherits the alignment from its parent node or uses the default alignment defined by the OrgChart.Align property
exAlignRight {exontrol.AlignEnum}, the node's assistant and child nodes are aligned to the right of the node

The Caption property defines the caption of the node. It supports HTML formatting, allowing the use of tags such as <b> for bold, <i> for italic, and <u> for underline. This property determines the text shown on the node in the organizational chart, enabling meaningful and well-formatted labels. Images can also be embedded within the caption using the <img> tag, with the image provided through the exontrol.HTMLPicture.Add method. The FormatText property specifies how the node's caption is formatted, while the Size property defines the dimensions or limits of the caption.

The Cursor property defines the mouse cursor for an individual node. Setting the Cursor property for a node overrides both the cursors defined by any parent node's Node.Cursors property and the default cursors defined for the entire chart in the OrgChart.Cursors property. The Cursor property can be set to any valid CSS cursor value, such as "pointer" or "move". For example, you might set a "pointer" cursor for nodes that are clickable while using the default cursor for non-interactive nodes.

null {null}, specifies the default cursor
"pointer" {string}, shows the pointer cursor when hovering over the node

The Cursors property defines the mouse cursor to display when pointing over a node or its parts, such as child nodes, assistant nodes, expand/collapse glyphs, and more. Setting the Cursors property at the node level allows you to specify different cursor styles for specific nodes and their descendants, overriding the default cursor defined for the entire chart in the OrgChart.Cursors property. The Cursor property defines the cursor for the node itself. For example, you can set a pointer cursor when hovering over a node to indicate it is clickable, or a move cursor to indicate the node can be dragged. When the Cursors property is set for a node, any previously defined cursors are overridden. For example, if the chart's OrgChart.Cursors property is "pointer(node,expand)" and the node's Cursors property is set to "crosshair(node)", only the "crosshair(node)" cursor is applied for that node. The "pointer(expand)" cursor is no longer defined for the node, so hovering over the node's expand/collapse glyphs will not display the pointer cursor.

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

null {null}, specifies the default cursor
"pointer(node,expand)" {string}, shows the pointer cursor when hovering over any node and its expand/collapse glyphs

The Enabled property enables or disables the node (including all its descendant nodes). When Enabled is set to false, the node is typically displayed in a grayed-out style, does not respond to user interactions such as clicks or hovers, and even if selected, it is not highlighted and no selection frame is shown. Setting Enabled to true makes the node interactive and responsive. The Selectable property specifies whether the user can select the node.

true {boolean}, enables the node
false {boolean}, disables the node

The Expand property expands or collapses a node's direct descendants (includes child, assistant, and group direct-descendants). The ExpandAssistant property specifies whether assistant direct descendants are expanded or collapsed, the ExpandChild property controls the expansion of child direct descendants, and the ExpandGroup property controls the expansion of group direct descendants. By default, the Expand property is set to true, meaning that a node's direct descendants are expanded when added to the control unless specified otherwise.

true {boolean}, expands the node's direct descendants
false {boolean}, collapses the node's direct descendants

The ExpandAssistant property expands or collapses a node's assistant direct descendants. The Expand property controls whether the node's direct descendants—including child, assistant, and group nodes—are expanded or collapsed. The ExpandChild property specifies the expansion state of child direct descendants, and the ExpandGroup property specifies the expansion state of group direct descendants. By default, the ExpandAssistant property is true, meaning that a node's assistant direct descendants are expanded when added to the control unless specified otherwise.

true {boolean}, the node's assistant direct descendants are expanded
false {boolean}, the node's assistant direct descendants are collapsed

The ExpandChild property expands or collapses the node's child direct descendants. The Expand property controls whether the node's direct descendants—including child, assistant, and group nodes—are expanded or collapsed. The ExpandAssistant property specifies the expansion state of assistant direct descendants, and the ExpandGroup property specifies the expansion state of group direct descendants. By default, the ExpandChild property is true, meaning that a node's child direct descendants are expanded when added to the control unless specified otherwise.

true {boolean}, the node's child direct descendants are expanded
false {boolean}, the node's child direct descendants are collapsed

The ExpandGroup property expands or collapses the node's group direct descendants. The Expand property controls whether the node's direct descendants—including child, assistant, and group nodes—are expanded or collapsed. The ExpandAssistant property specifies the expansion state of assistant direct descendants, and the ExpandChild property specifies the expansion state of child direct descendants. By default, the ExpandGroup property is true, meaning that a node's group direct descendants are expanded when added to the control unless specified otherwise.

true {boolean}, the node's group direct descendants are expanded
false {boolean}, the node's group direct descendants are collapsed

The Flow property defines the flow and arrangement of a node and its descendant nodes within the chart. It allows you to control the layout and organization of nodes, enabling different visual structures based on their relationships. The Flow property can be set to one of the values of Layout.FlowEnum, which defines options such as top-to-bottom or left-to-right layouts. If the Flow property is not specified (null or undefined), the node inherits the flow from its parent node or uses the default flow defined by the OrgChart.Flow property. The Node.Margins property specifies the horizontal and vertical distance between nodes, as an object of {x, y, indent, border} type.

null {null}, the node inherits the flow from its parent node or uses the default flow defined by the OrgChart.Flow property
"flowVertical" {Layout.FlowEnum}, the node and its descendant nodes are arranged vertically (rotate of "flowHorizontal")

The FormatText property specifies how a node's caption is displayed. It is a bitwise combination of flags that control alignment, word breaking, tab expansion, and other aspects of text rendering within the control. For example, you can align text to the center, enable word breaking for long captions, or force the text to be displayed on a single line. The exontrol.DrawTextFormatEnum type defines the available flags that can be combined to achieve the desired formatting. The Node.Size property defines the dimensions or limits of the node's caption, while the Node.Caption property defines the ex-HTML label displayed by the node.

The exontrol.DrawTextFormatEnum type support the following flags:

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

null {null}, the control will apply the default text format specified in OrgChart.FormatText property
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned

The Image property defines the name of the image or picture displayed by a node. Images can be added using the exontrol.HTMLPicture.Add method. The Caption property defines the ex-HTML label displayed by the node, and images can also be embedded within the caption using the <img> tag. The ImageSize property defines the size of the image specified by the Image property, while the ImageAlign property specifies the alignment of the image within the node.

null {null}, the node does not display any image
"imgName" {string}, the node displays the image with the specified name

The ImageAlign property defines the alignment of a node's image, while the ImageSize property defines the dimensions of the node's image. These properties work together to control how the image is displayed relative to the node's caption. If the ImageAlign property is null for a node, the control uses the OrgChart.ImageAlign property to align the image consistently across all nodes unless overridden at the node level. Similarly, if the ImageSize property is undefined for a node, the control uses the OrgChart.ImageSize property to determine the image dimensions, ensuring consistent sizing across nodes unless specified otherwise.

The ImageAlign property can be any of the following:

• {null}, the OrgChart.ImageAlign option is considered, so the node's image is aligned according to the control's ImageAlign option
• 0, the image is on the left of the node's caption
• 1, the image is on the right of the node's caption
• 2, the image is on the top of the node's caption
• 3, the image is on the bottom of the node's caption

null {null}, the OrgChart.ImageAlign option is considered, so the node's image is aligned according to the control's ImageAlign option
0 {number}, the image is on the left of the node's caption
1 {number}, the image is on the right of the node's caption

The ImageSize property defines the size of a node's image, while the ImageAlign property defines the alignment of the image within the node. The ImageSize property can be set to undefined to use the control's default image size specified in OrgChart.ImageSize, set to null to automatically size the image based on its original dimensions, specified as a numeric value to fit the image within a square of that size, or provided as an array to set separate width and height limits. These options allow flexible control over how images are displayed within nodes, ensuring they fit well with the node's caption and the overall layout of the organizational chart.

The ImageSize property can be set to the following values:

• {undefined}, specifies that the OrgChart.ImageSize property defines the size or limits of the node's image.
• {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.

undefined {undefined}, specifies that the OrgChart.ImageSize property defines the size or limits of the node's image
null {null}, indicates that the node's image is displayed as it is (full-sized)
100 {number}, specifies that the node's image is displayed into a square of 100x100 size

The Key property defines the key associated with a node. You can use the OrgChart.Node() method to retrieve a node by its key or caption. The Key property is useful for identifying and accessing nodes within the control, especially in large organizational charts. By assigning a unique key to each node, you can easily reference specific nodes without relying on captions, which may not be unique. The Key property does not affect the node's appearance in the chart but serves as an identifier for various methods and operations within the control.

null {null}, the node does not have a key and its caption is used to identify it instead
"key" {string}, assigns a key to the node to identify it instead of its caption

The Link property defines the attributes of the link between a node and its descendant nodes. The OrgChart.ShowLinks property controls whether the chart displays or hides links between nodes. The Linka property specifies the link attributes for a node and its assistant nodes, while the Linkg property specifies the link attributes for a node and its group nodes. Setting the Link property at the node level allows you to customize link appearance for specific nodes and their relationships, overriding the default attributes defined in the OrgChart.Link property. By default, the Link property is null, meaning the control uses the default link attributes from OrgChart.Link for all nodes.

null {null}, specifies the default link attributes
{color:"red",width:2} {DisplayLinkType}, specifies the link attributes with a red color and width of 2

The Linka property defines the attributes of the linka between a node and its assistant-nodes. The OrgChart.ShowLinks property controls whether the chart displays or hides links between nodes. The Linka property specifies the link attributes for a node and its assistant nodes, while the Linkg property specifies the link attributes for a node and its group nodes. Setting the Linka property at the node level allows you to customize link appearance for specific nodes and their assistant relationships, overriding the default attributes defined in the OrgChart.Linka property. By default, the Linka property is null, meaning the control uses the default link attributes from OrgChart.Linka for all nodes and their assistant relationships.

null {null}, specifies the default link attributes
{color:"red",width:2} {DisplayLinkType}, specifies the link attributes with a red color and width of 2

The Linkg property defines the attributes of the linkg between a node and its group-nodes. The OrgChart.ShowLinks property controls whether the chart displays or hides links between nodes. The Linka property specifies the link attributes for a node and its assistant nodes, while the Linkg property specifies the link attributes for a node and its group nodes. Setting the Linkg property at the node level allows you to customize link appearance for specific nodes and their group relationships, overriding the default attributes defined in the OrgChart.Linkg property. By default, the Linkg property is null, meaning the control uses the default link attributes from OrgChart.Linkg for all nodes and their group relationships.

null {null}, specifies the default link attributes
{color:"red",width:2} {DisplayLinkType}, specifies the link attributes with a red color and width of 2

The Margins property defines the horizontal and vertical distance between a node and its descendant nodes, defined as an object of {x, y, indent, border} type. The Flow property defines the arrangement of the node and its descendants within the chart. 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. By default, the Margins property is null, which means the node uses the default margins defined by the OrgChart.Margins property.

null {null}, the node inherits the margins from its parent node or uses the default margins defined by the OrgChart.Margins property
{x:20, y:30} {object}, the node has a horizontal distance of 20 and a vertical distance of 30 between itself and its descendant nodes

The Nodes property replaces the current node and all its descendants by the giving string representation of the nodes. The GetNodes() method can be used to get the string representation of the current node and all its descendants, which can then be modified and assigned back to the Nodes property to update the node structure, captions, flags, and other attributes in a single operation. The OrgChart.Nodes property is equivalent with Root.Nodes and can be used to set the entire chart's node structure and attributes using a single string representation.

The format of the nodes'string representation is (everything between () refers to children, and everything between [] refers to flags):

"Node(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]

The following statements are equivalent:

 oOrgChart.Root.SetNodes("Root(1,2,3[g])"), adds two child-nodes 1, 2 and 3 as a group-node of the root
 oOrgChart.Root.Nodes = "Root(1,2,3[g])", adds two child-nodes 1, 2 and 3 as a group-node of the root
 oOrgChart.Nodes = "Root(1,2,3[g])", adds two child-nodes 1, 2 and 3 as a group-node of the root

where oOrgChart is an object of OrgChart type

The Options property defines the current node's options as an object of NodeOptions type that holds information about the node, such as caption, image and so on.

Every option of the NodeOptions type has associated a property of the Node object. For instance, the option:

caption {string}, specifies the ex-HTML caption a node displays

is associated with the property:

Caption {string}, specifies the ex-HTML caption a node displays

which means that the following statements are equivalent:

oNode.SetOptions({caption: "name"})
oNode.Options = {caption: "name"}
oNode.SetCaption("name")
oNode.Caption = "name"

where oNode is an object of Node type.

It is important to note that changing a field of the Options object does not automatically update the node. For example, oNode.Options.caption = "abc" does not apply the change. Instead, you must assign the Options property again, such as oNode.Options = {caption: "abc"}, so the node updates and applies the new value.

{caption: "name"} {NodeOptions}, specifies the node's caption as "name"
{caption: "name", image: "imgName"} {NodeOptions}, specifies the node's caption as "name" and its image as "imgName"

The Pad property defines the space between a node's content and its border. It can be a single number applied to all sides or an array/string specifying different horizontal and vertical values (for example, 10 for all sides, "10,5" or [10,5] for 10 horizontal and 5 vertical). This provides precise control over a node's internal spacing, improving layout and readability. The OrgChart.Pad property sets the default padding for the chart, which individual nodes can override with their own Pad property

The value of Pad property can be:

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

null {null}, removes the node's padding and inherits it from the control
10 {number}, pads horizontal and vertical size with the same value of 10

The Parent property defines a node's parent as a Node object and allows changing it by assigning a new parent. The root node's parent is null. The AddChild, AddAssistant, and AddGroup methods add a child, assistant, or group node to the current node, respectively. When changing a node's parent, the method verifies if the move is valid, then removes the node from its current parent's children and adds it to the new parent's children collection. The Parent property can be used to get or set the node's parent, where the setter accepts either a Node object or a string representing the node's key or caption.

The type of the node is preserved when it is moved under a new parent. For instance, if a assistant-node is moved under a new parent, it remains an assistant-node under the new parent. If a group-node is moved under a new parent, it remains a group-node under the new parent. If a child-node is moved under a new parent, it remains a child-node under the new parent. However, the method checks whether the node can be child of the new parent before moving it. For instance, if we try to move a node under its own descendant, the method doesn't allow this move since it creates a circular reference in the hierarchy.

The setter of the Parent property supports the following types of values:

• value {Node}, Indicates an object of Node that specifies the node itself
• value {string}, Specifies the node's key or caption

The getter of the Parent property returns the node's parent as an object of Node type. The root node's parent is null.

The following statements are equivalent:

 oNode.GetParent() {Node}, gets the node's parent
 oNode.Parent {Node}, gets the node's parent

where oNode is an object of Node type

The Position property defines a node's location within its parent's children collection and can be used to move the node to a new position. It is a zero-based index, where 0 represents the first child, assistant, or group. Changing the Position updates the node's order among its siblings without affecting the hierarchy, allowing precise control over the display sequence of children, assistants, or group nodes.

0 {number}, moves the node to be the first child or assistant or group in its parent's children collection
1 {number}, moves the node to be the second child or assistant or group in its parent's children collection

The Selectable property indicates whether a user can select a node. When Selectable is set to false, the node cannot be selected, even if it is Enabled and interactive in other ways; it will not be included in the selection when clicked or when using selection tools. Setting Selectable to true allows the node to be selected, making it part of the selection set. The Selection property defines the nodes that are currently selected within the control.

false {boolean}, the user can't select the node
true {boolean}, the user can select the node

The Shape property defines the shape of an individual node. Unlike the Node.Shapes property, it does not automatically propagate to the node's children or descendants. Setting the Shape property for a node overrides both the shape defined by any parent node's Node.Shapes property and the default node shape defined for the entire chart in the OrgChart.Shapes property.

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

• {null}, no custom-shape is applied
• the shape's name within the exontrol.Shapes.OrgChart or exontrol.Shapes namespace
• a CSS color
• a JSON string-representation of an object of exontrol.Def.Shape type
• an object of {normal,hover,click,disabled} type. The normal, hover, click and disabled are objects of exontrol.Def.Shape type

null {null}, specifies the default visual appearance for the node
"red", "#FF0000", "rgb(255,0,0)", "rgba(255,0,0,1)" {string}, shows the node in red
{frameColor: "red", fillColor: "blue", pad: -0.5} {object}, draws a red-frame with blue-fill and a padding of -0.5 around the node

The Shapes property defines the shapes applied to a node and its descendants, allowing customization of the visual appearance of different parts of the control, including child nodes, assistant nodes, expand/collapse glyphs, and more. Setting the Shapes property at the node level overrides the default shapes defined for the entire chart (OrgChart.Shapes property), enabling a distinct design for specific nodes and their hierarchy. The Shape property, in contrast, defines the shape of the node itself. When the Shapes property is set for a node, any previously defined shapes are overridden. For example, if the chart's OrgChart.Shapes property is set to "node(node),nodeA(nodea),nodeG(nodeg),Expand(expand),FrameSel(select),FrameSel(frameSel),FrameFit(frameFit),Empty(frameDrag),shmulti(multiSel)" and the node's Shapes property is set to "Button(node)", only the "Button(node)" shape is applied for that node. All other shapes for parts such as "expand", "select", and others are no longer defined for that node.

The format of the property is:

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

where:

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

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

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

The shapes property supports any of the following parts:

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

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

The Show property shows or hides the node's direct descendant-nodes of different types. It allows you to control the visibility of specific types of direct descendant nodes, such as assistant, child, or group nodes, in a non-recursive manner. For example, you can hide assistant nodes by excluding the exNodeAssistant flag. The OrgChart.Show property can also be used to show or hide specific node types, but it applies to the entire chart. The Show property is useful for focusing on particular aspects of the organizational chart or simplifying the view as needed.

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

• null, the node shows all types of descendant-nodes (based on the OrgChart.Show property value)
• exNodeChild (1), specifies a node of child-type
• exNodeAssistant (2), specifies a node of assistant-type
• exNodeGroup (4), specifies a node of group-type

null {null}, the node shows all types of descendant-nodes (based on the OrgChart.Show property value)
exNodeChild (1), the node shows child-nodes and hides assistant and group-nodes

The ShowExpandGlyphs property shows or hides the node's expand/collapse glyphs for different type of nodes in a non-recursive manner. For example, you can show glyphs only for child nodes by including the exNodeChild flag and excluding the exNodeAssistant and exNodeGroup flags. The SingleExpandGlyphs property determines whether the node displays a single or multiple expand/collapse glyphs. If the ShowExpandGlyphs property is not specified (null or undefined), the node uses the default settings defined by the OrgChart.ShowExpandGlyphs property.

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

• null, the node's expand/collapse glyphs is shown based on the OrgChart.ShowExpandGlyphs property value
• exNodeChild (1), specifies a node of child-type
• exNodeAssistant (2), specifies a node of assistant-type
• exNodeGroup (4), specifies a node of group-type

null {null}, the node's expand/collapse glyphs is shown based on the OrgChart.ShowExpandGlyphs property value
exNodeChild (1), the node shows expand/collapse glyphs for child-nodes and hides them for assistant and group-nodes

The SingleExpandGlyphs property shows or hides a single expand/collapse glyph for all descendant nodes of the current node, regardless of their types. When SingleExpandGlyphs is set to true, the node displays a single expand/collapse glyph for all its descendant nodes, regardless of their types. When set to false, the node displays separate expand/collapse glyphs for each type of descendant node as specified by the ShowExpandGlyphs property. By default, the SingleExpandGlyphs property is null, which means the node uses the default setting defined by the OrgChart.SingleExpandGlyphs property.

null {null}, the node uses the default setting defined by the OrgChart.SingleExpandGlyphs property
true, the node displays a single expand/collapse glyph for all its descendant nodes (regardless of their types)
false, the node displays separate expand/collapse glyphs for each type of descendant node

The Size property defines the dimensions or limits of a node's caption. It controls the area where the node's caption is displayed, which helps maintain a consistent layout and ensures captions fit within a specified space. If Size is set to null, the caption is automatically sized based on its content, with the control calculating the necessary dimensions to fit both the caption text and any associated image. If the Size property is undefined for a node, the control uses the OrgChart.Size property to determine the node's caption dimensions, allowing for a consistent caption size across all nodes unless overridden at the node level. The Caption property defines the ex-HTML label displayed by the node, and the FormatText property specifies how the caption is rendered and formatted. The ImageSize property defines the dimensions of the node's image. If ImageSize is undefined for a node, the control uses the OrgChart.ImageSize property to determine the image dimensions, ensuring consistency across the chart unless overridden at the node level.

The Size property can be set to the following values:

• {undefined}, the OrgChart.Size property is considered, so the node's caption is measured according to the control's Size option
• {null}, automatically sizes the node's caption based on its content, so the node's caption is measured according to its text and image content
• {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)

undefined {undefined}, the OrgChart.Size property is considered, so the node's caption is measured according to the control's Size option
null {null}, automatically sizes the node's caption based on its content
100 or "100" {number}, specifies that the node's caption is displayed into a square of 100x100 size
[null, null, 200, 100] {number[]}, specifies that the node's caption is automatically sized based on its content but with a maximum width of 200 and a maximum height of 100

The Visible property shows or hides the current node. Setting Visible to false hides the node along with all its descendants, while setting it to true makes them visible again. This property is useful for temporarily hiding parts of the organizational chart without removing nodes, allowing you to focus on specific sections or simplify the view. The Show property specifies which types of direct descendant nodes are displayed, for example excluding the exNodeAssistant flag hides assistant nodes. In contrast, the Visible property controls whether the node itself and all its descendants are displayed or hidden. By default, the Visible property is true, meaning nodes are visible when added to the control unless specified otherwise. The root node cannot be hidden; setting its Visible property to false hides only its descendant nodes.

false {boolean}, hides the node along with all its descendants
true {boolean}, makes the node and all its descendants visible again

The AddAssistant() method adds an assistant-node. The assistant nodes are usually used to represent assistants or advisors in an organizational structure. They are displayed below the parent node above the child nodes. Assistant nodes can be aligned at the top, middle, or bottom relative to their parent (based on the Align property). The Flow property does not affect assistant nodes, as they are always arranged vertically. The Expand and ExpandAssistant properties determine whether the assistant nodes are expanded or collapsed.

oOrgChart.Root.AddAssistant("assistant1") {Node}, adds an assistant-node with caption "assistant1" to the root node of the chart
oOrgChart.Root.AddAssistant({caption: "assistant1", image: "img1"}) {Node}, adds an assistant-node with caption "assistant1" and image "img1" to the root node of the chart

The AddChild() method adds a child node, the most common type used to represent the organizational structure. Child nodes are displayed under their parent (below assistant nodes) and can be aligned left, right, or center relative to the parent (based on the Align property). Their layout can be further controlled using the Flow property, which defines their arrangement. The Expand and ExpandChild properties determine whether the child nodes are expanded or collapsed.

oOrgChart.Root.AddChild("child1") {Node}, adds a child-node with caption "child1" to the root node of the chart
oOrgChart.Root.AddChild({caption: "child1", image: "img1"}) {Node}, adds a child-node with caption "child1" and image "img1" to the root node of the chart

The AddGroup() method adds a group node, used to group nodes at the same level without creating a hierarchical relationship. Group nodes are displayed at the same level as their parent, positioned to its right, and can be aligned top, middle, or bottom relative to the parent (based on the Align property). The Flow property does not affect group nodes, as they are always arranged vertically. The Expand and ExpandGroup properties control whether the group nodes are expanded or collapsed.

oOrgChart.Root.AddGroup("group1") {Node}, adds a group-node with caption "group1" to the root node of the chart
oOrgChart.Root.AddGroup({caption: "group1", image: "img1"}) {Node}, adds a group-node with caption "group1" and image "img1" to the root node of the chart

The Clear() method removes all descendant nodes of the current node, including child, assistant, and group nodes. Unlike Remove() property, which deletes both the node and its descendants from the chart, Clear() only removes the descendants while keeping the node itself intact. The ClearChild() method clears the node's child-descendants. The ClearAssistant() method clears the node's assistant-descendants. The ClearGroup() method clears the node's group-descendants.

oNode.Clear(), clears the descendants of the node (including child assistant and group-nodes)

The ClearAssistant() method clears the node's assistant-descendants. The ClearChild() method clears the node's child-descendants. The ClearGroup() method clears the node's group-descendants. The Clear() method clears the node's descendants which includes child, assistant or group-nodes. The difference between the Clear() and Remove() methods is that the Clear() method only clears the node's descendants, while the Remove() method clears the node's descendants and removes the node itself from the chart.

oNode.ClearAssistant(), clears the assistant-descendants of the node

The ClearChild() method clears the node's child-descendants. The ClearAssistant() method clears the node's assistant-descendants. The ClearGroup() method clears the node's group-descendants. The Clear() method clears the node's descendants which includes child, assistant or group-nodes. The difference between the Clear() and Remove() methods is that the Clear() method only clears the node's descendants, while the Remove() method clears the node's descendants and removes the node itself from the chart.

oNode.ClearChild(), clears the child-descendants of the node

The ClearGroup() method clears the node's group-descendants. The ClearChild() method clears the node's child-descendants. The ClearAssistant() method clears the node's assistant-descendants. The Clear() method clears the node's descendants which includes child, assistant or group-nodes. The difference between the Clear() and Remove() methods is that the Clear() method only clears the node's descendants, while the Remove() method clears the node's descendants and removes the node itself from the chart.

oNode.ClearGroup(), clears the group-descendants of the node

The Debug() method gets debug information about the current object. It returns a string that includes the node's caption and its descendant nodes (child, assistant, group) in a hierarchical structure. The sIndent parameter is used for indentation to visually represent the hierarchy of nodes in the debug output. Each level of descendants is indented further to indicate their relationship to the parent node. This method is useful for developers to understand the structure and properties of the node and its descendants during debugging.

console.log( oOrgChart.Root.Debug() ), logs debug information about the root node and its descendants to the console

The GetExpandType() method indicates whether the node's direct-descendants are expanded or collapsed (by type). The ExpandAssistant property specifies whether assistant direct descendants are expanded or collapsed, the ExpandChild property controls the expansion of child direct descendants, and the ExpandGroup property controls the expansion of group direct descendants. By default, the Expand property is set to true, meaning that a node's direct descendants are expanded when added to the control unless specified otherwise.

The following statements are equivalent:

 oNode.GetExpandType(null) {boolean}, indicates whether the node's direct-descendants are expanded or collapsed (all types of descendant nodes are checked)
 oNode.GetExpand() {boolean}, indicates whether the node's direct-descendants are expanded or collapsed (all types of descendant nodes are checked)
 oNode.Expand {boolean}, indicates whether the node's direct-descendants are expanded or collapsed (all types of descendant nodes are checked)

where oNode is an object of Node type

The Item() method searches for a node giving its key or caption, and returns the first found node as an object of Node type. The search is performed among all descendant nodes of the current node, including child, assistant and group-nodes. If there are more than one node with the same caption or key, the method returns the first found node in pre-order traversal of the tree. The OrgChart.Node property is a shortcut to the Item() method of the root-node, so it searches for a node with specified key or caption among all nodes of the chart.

The following statements are equivalent:

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

where oOrgChart is an instance of OrgChart control

The Remove() method removes the node (including all its descendants). The method first clears the node's descendants which include child, assistant and group-nodes, then removes the current node from owner's collection, and finally notifies the view about removing the current node (while it is not its root) and requests for a new layout once a node is removed. The RemoveSelection method removes the selected node(s) from the chart, so it calls the Remove() method for each selected node. The ClearChild() method clears the node's child-descendants. The ClearAssistant() method clears the node's assistant-descendants. The ClearGroup() method clears the node's group-descendants. The Clear() method clears the node's descendants which includes child, assistant or group-nodes. The difference between the Clear() and Remove() methods is that the Clear() method only clears the node's descendants, while the Remove() method clears the node's descendants and removes the node itself from the chart.

oNode.Remove(), removes the oNode and all its descendants from the chart

The SetExpandType() method expands or collapses the node’s direct descendants based on their type. The expand/collapse state affects only the current node and is not applied recursively to its descendants. The ExpandAssistant property specifies whether assistant direct descendants are expanded or collapsed, the ExpandChild property controls the expansion of child direct descendants, and the ExpandGroup property controls the expansion of group direct descendants. By default, the Expand property is set to true, meaning that a node's direct descendants are expanded when added to the control unless specified otherwise.

The following statements are equivalent:

 oNode.SetExpandType( null, true ), expands the node's direct-descendants of all types (child, assistant, group)
 oNode.SetExpand( true ), expands the node's direct-descendants of all types (child, assistant, group)
 oNode.Expand = true, expands the node's direct-descendants of all types (child, assistant, group)

where oNode is an object of Node type

The ToggleExpand() method toggles the node's expand state for specified type of nodes. If the node is currently expanded, it will be collapsed, and if it is currently collapsed, it will be expanded. The nNodeType parameter determines which type of descendant nodes (child, assistant, group) the toggle action applies to. If nNodeType is set to 0, no nodes will be toggled. If nNodeType is null, missing, or undefined, the toggle action will apply to all types of descendant nodes. Otherwise, you can specify a combination of NodeTypeEnum flags to target specific types of descendant nodes for toggling.

oNode.ToggleExpand( null ), toggles the node's expand state for all types of descendant nodes (child, assistant, group)
 oNode.ToggleExpand( 1 ), toggles the node's expand state for child nodes only

The forEach() method iterates over all descendant nodes of a given node in a forward direction and calls a callback for each node. The callback receives the current node and its position in the iteration. The iteration continues for every node in the branch. This method is equivalent to the control-level feN() method but limited to the node's branch and is useful for updating properties, applying styles, or collecting information. The feN() and feNU() methods are shortcuts for the root node and enumerate all nodes in the chart.

The following statements are equivalent:

 oOrgChart.Root.forEach(callback) {Node}, iterates over all descendant nodes of the root node
 oOrgChart.feN(callback) {Node}, iterates over all nodes in the chart

where oOrgChart is an instance of OrgChart control

The forEachU() method iterates over descendant nodes of a given node in a forward direction and stops immediately when the callback returns a truthy value. The callback receives the current node and its position in the iteration. This method is equivalent to the control-level feNU() method but limited to the node's branch and is useful for efficiently finding a specific node, checking a condition, or performing an operation until a criterion is met.

The following statements are equivalent:

 oOrgChart.Root.forEachU(callback) {Node}, iterates over descendant nodes of the root node and stops immediately when the callback returns a truthy value
 oOrgChart.feNU(callback) {Node}, iterates over all nodes in the chart and stops immediately when the callback returns a truthy value

where oOrgChart is an instance of OrgChart control