NodeOptions class (OrgChart)

The align field determines how assistant and child nodes are positioned relative to their parent node. It accepts a value from AlignEnum. For example, exAlignLeft aligns child and assistant nodes to the left, while exAlignCenter centers them horizontally. Setting the align field helps control the chart's visual structure, making relationships between nodes easier to understand. If the align field is not specified for a node, it will inherit the alignment from its parent node or use the default alignment defined by the OrgChart.Align property. The align field may have no effect when the layout is set to a tree layout (flowVerticalTree or flowHorizontalTree).

The exontrol.AlignEnum type supports the following values:

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

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

oNode.Options = {align: exontrol.AlignEnum.exAlignLeft}
oNode.SetOptions({align: exontrol.AlignEnum.exAlignLeft})
oNode.Align = exontrol.AlignEnum.exAlignLeft
oNode.SetAlign(exontrol.AlignEnum.exAlignLeft)

null {null}, the node inherits the alignment from its parent node or uses the default alignment defined by the OrgChart.Align property
"alignLeft" {string}, the node's assistant and child nodes are aligned

The caption field defines the ex-HTML label displayed by a node. It supports HTML formatting, allowing you to use tags such as <b> for bold, <i> for italic, and <u> for underline. This field determines the text shown on the node in the organizational chart, enabling you to assign meaningful and well-formatted labels. Additionally, images can be embedded within the caption using the <img> tag, with the image provided via the exontrol.HTMLPicture.Add method. The formatText field specifies the format to display the node's caption. The size field defines the size or limits of the node's caption.

The caption field is mapped to the Node.Caption property, which means that the following statements are equivalent:

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

The cursor field defines the mouse-cursor for an individual node. Setting the cursor field 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 can be set to any valid CSS cursor value, such as "pointer", "move" and so on. For example, you might set a "pointer" cursor for nodes that are clickable, while using the default cursor for non-interactive nodes.

The cursor field is mapped to the Node.Cursor property, which means that the following statements are equivalent:

oNode.Options = {cursor: "pointer"}
oNode.SetOptions({cursor: "pointer"})
oNode.Cursor = "pointer"
oNode.SetCursor("pointer")

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

The cursors field 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. By setting the cursors field at the node level, you can 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 field defines the cursor for the node itself. For example, you can set a pointer cursor when hovering over a node to indicate that it is clickable, or use a move cursor to indicate that a node can be dragged. When the cursors field is set for a node, any previously defined cursors are overridden. For instance, if the chart's OrgChart.Cursors property is set to "pointer(node,expand)" and the node's cursors field is set to "crosshair(node)", only the "crosshair(node)" cursor is applied for that node, while the "pointer(expand)" cursor is no longer defined for that node, so when the mouse hovers the node's expand/collapse glyphs no "pointer" cursor is shown.

The format of the property is:

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

where:

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

The "cursor" can be any of the following:

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

The "part" can be any of the following:

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

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

oNode.Options = {cursors: "pointer(node,expand)"}
oNode.SetOptions({cursors: "pointer(node,expand)"})
oNode.Cursors = "pointer(node,expand)"
oNode.SetCursors("pointer(node,expand)")

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 field determines whether a node is active or inactive (including all its descendant nodes). When enabled is set to false, the node is typically shown 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 displayed. Setting enabled to true makes the node interactive and responsive. The selectable field specifies whether the user can select the node.

The enabled field is mapped to the Node.Enabled property, which means that the following statements are equivalent:

oNode.Options = {enabled: false}
oNode.SetOptions({enabled: false})
oNode.Enabled = false
oNode.SetEnabled(false)

false {boolean}, the node is disabled and does not respond to user interactions
true {boolean}, the node is enabled and responds to user interactions

The expand field indicates whether the node's direct-descendants are expanded or collapsed (includes child, assistant, and group direct-descendants). The expandAssistant field indicates whether the node's assistant direct-descendants are expanded or collapsed. The expandChild field indicates whether the node's child direct-descendants are expanded or collapsed. The expandGroup field indicates whether the node's group direct-descendants are expanded or collapsed. By default, the expand field is set to true, meaning that direct-descendants of the node are expanded when added to the control unless specified otherwise.

The expand field is mapped to the Node.Expand property, which means that the following statements are equivalent:

oNode.Options = {expand: false}
oNode.SetOptions({expand: false})
oNode.Expand = false
oNode.SetExpand(false)

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

The expandAssistant field indicates whether the node's assistant direct-descendants are expanded or collapsed. The expand field indicates whether the node's direct-descendants are expanded or collapsed (includes child, assistant, and group direct-descendants). The expandChild field indicates whether the node's child direct-descendants are expanded or collapsed. The expandGroup field indicates whether the node's group direct-descendants are expanded or collapsed. By default, the expandAssistant field is true, meaning that assistant direct-descendants of the node are expanded when added to the control unless specified otherwise.

The expandAssistant field is mapped to the Node.ExpandAssistant property, which means that the following statements are equivalent:

oNode.Options = {expandAssistant: false}
oNode.SetOptions({expandAssistant: false})
oNode.ExpandAssistant = false
oNode.SetExpandAssistant(false)

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

The expandChild field indicates whether the node's child direct-descendants are expanded or collapsed. The expand field indicates whether the node's direct-descendants are expanded or collapsed (includes child, assistant, and group direct-descendants). The expandAssistant field indicates whether the node's assistant direct-descendants are expanded or collapsed. The expandGroup field indicates whether the node's group direct-descendants are expanded or collapsed. By default, the expandChild field is true, meaning that child direct-descendants of the node are expanded when added to the control unless specified otherwise.

The expandChild field is mapped to the Node.ExpandChild property, which means that the following statements are equivalent:

oNode.Options = {expandChild: false}
oNode.SetOptions({expandChild: false})
oNode.ExpandChild = false
oNode.SetExpandChild(false)

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

The expandGroup field indicates whether the node's group direct-descendants are expanded or collapsed. The expand field indicates whether the node's direct-descendants are expanded or collapsed (includes child, assistant, and group direct-descendants). The expandAssistant field indicates whether the node's assistant direct-descendants are expanded or collapsed. The expandChild field indicates whether the node's child direct-descendants are expanded or collapsed. By default, the expandGroup field is true, meaning that group direct-descendants of the node are expanded when added to the control unless specified otherwise.

The expandGroup field is mapped to the Node.ExpandGroup property, which means that the following statements are equivalent:

oNode.Options = {expandGroup: false}
oNode.SetOptions({expandGroup: false})
oNode.ExpandGroup = false
oNode.SetExpandGroup(false)

The flow field specifies 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 the relationships between them. The flow field can be set to one of the values of the Layout.FlowEnum type, which defines various flow options such as top-to-bottom, left-to-right, and others. If the flow field 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.

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

oNode.Options = {flow: exontrol.OrgChart.FlowEnum.topToBottom}
oNode.SetOptions({flow: exontrol.OrgChart.FlowEnum.topToBottom})
oNode.Flow = exontrol.OrgChart.FlowEnum.topToBottom
oNode.SetFlow(exontrol.OrgChart.FlowEnum.topToBottom)

null {null}, the node inherits the flow from its parent node or uses the default flow defined by the OrgChart.Flow property
"flowVertical" {string}, the node and its descendant nodes are arranged in a top-to-bottom flow

The formatText field specifies the format to display the node's caption. The formatText field is a bitwise combination of flags that control the alignment, word-breaking, tab expansion, and other aspects of how text is rendered within the control. For example, you can choose to align text to the center, enable word-breaking for long captions, or specify that text should be displayed on a single line. The exontrol.DrawTextFormatEnum type defines various flags that can be combined to achieve the desired text formatting. The size field defines the size or limits of the node's caption. The caption field defines the ex-HTML label displayed by a node. If the formatText field is null, empty, or undefined, the control will automatically apply the default text format specified in OrgChart.FormatText property.

The exontrol.DrawTextFormatEnum type supports the following flags:

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

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

oNode.Options = {formatText: exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextWordBreak}
oNode.SetOptions({formatText: exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextWordBreak})
oNode.FormatText = exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextWordBreak
oNode.SetFormatText(exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextWordBreak)

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 field specifies the name of the image/picture the node displays. The image can be added using the exontrol.HTMLPicture.Add method. The caption field defines the ex-HTML label displayed by a node. Using the caption field you can embed images within the caption using the <img> tag. The imageSize field defines the size of the image specified by the image field, while imageAlign specifies the alignment of the image within the node.

The image field is mapped to the Node.Image property, which means that the following statements are equivalent:

oNode.Options = {image: "imgName"}
oNode.SetOptions({image: "imgName"})
oNode.Image = "imgName"
oNode.SetImage("imgName")

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

The imageAlign field defines the alignment of the image within a node, and the imageSize field defines the size of the node's image. These fields work together with their corresponding properties to control how the image is displayed relative to the node's caption. If the imageAlign field is null, the control uses the OrgChart.ImageAlign property to align the image consistently across all nodes unless overridden at the node level. Likewise, if the imageSize field is undefined, the control uses the OrgChart.ImageSize property to determine the image dimensions, ensuring consistent sizing across nodes unless specified otherwise.

The imageAlign field 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

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

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

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 field defines the size of the node's image. The imageAlign field defines the alignment of the image within the node. The imageSize field can be set to undefined to use the control's default image size specified in OrgChart.ImageSize, or it can be set to null to automatically size the image based on its original dimensions. Alternatively, you can specify a numeric value to fit the image within a square of that size, or provide an array of limits for width and height. These options allow for flexible control over how images are displayed within nodes, ensuring that they fit well with the node's caption and overall layout of the organizational chart.

The imageSize field can be any of the following:

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

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

oNode.Options = {imageSize: 100}
oNode.SetOptions({imageSize: 100})
oNode.ImageSize = 100
oNode.SetImageSize(100)

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 field specifies the key associated with the node. You can use the OrgChart.Node() method ro request a node giving its key or caption. The key field is useful for identifying and retrieving nodes within the control, especially when you have a large organizational chart with many nodes. By assigning a unique key to each node, you can easily access specific nodes using their keys without needing to rely on their captions, which may not be unique. The key field does not affect the appearance of the node in the chart, but it serves as an identifier that can be used in various methods and operations within the control.

The key field is mapped to the Node.Key property, which means that the following statements are equivalent:

oNode.Options = {key: "uniqueKey"}
oNode.SetOptions({key: "uniqueKey"})
oNode.Key = "uniqueKey"
oNode.SetKey("uniqueKey")

null {null}, the node does not have a key associated with it
"uniqueKey" {string}, the node has a key with the specified value

The link field specifies the attributes of the link between a node and its descendant nodes. The OrgChart.ShowLinks property indicates whether the control shows or hides the links between nodes. The linka field specifies the attributes of the link between a node and its assistent-nodes. The linkg field specifies the attributes of the link between a node and its group-nodes. By setting the link field at the node level, you can customize the appearance of links for specific nodes and their relationships, overriding the default link attributes defined for the entire chart in the OrgChart.Link property. By default, the link field is null, which means that the control uses the default link attributes defined in the OrgChart.Link property for all nodes.

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

oNode.Options = {link: "red"}
oNode.SetOptions({link: "red"})
oNode.Link = "red"
oNode.SetLink("red")

null {null}, specifies the default link attributes defined in the OrgChart.Link property for all nodes
{color: "red", width: 2} {object}, shows the links in red color with a width of 2 pixels

The linka field specifies the attributes of the link between a node and its assistent-nodes. The OrgChart.ShowLinks property indicates whether the control shows or hides the links between nodes. By setting the linka field at the node level, you can customize the appearance of links for specific nodes and their assistent-nodes, overriding the default link attributes defined for the entire chart in the OrgChart.Linka property. By default, the linka field is null, which means that the control uses the default link attributes defined in the OrgChart.Linka property for all nodes and their assistent-nodes.

null {null}, specifies the default link attributes defined in the OrgChart.Linka property for all nodes and their assistent-nodes
{color: "red", width: 2} {object}, shows the links between a node and its assistent-nodes in red color with a width of 2 pixels

The linkg field specifies the attributes of the link between a node and its group-nodes. The OrgChart.ShowLinks property indicates whether the control shows or hides the links between nodes. By setting the linkg field at the node level, you can customize the appearance of links for specific nodes and their group-nodes, overriding the default link attributes defined for the entire chart in the OrgChart.Linkg property. By default, the linkg field is null, which means that the control uses the default link attributes defined in the OrgChart.Linkg property for all nodes and their group-nodes.

null {null}, specifies the default link attributes defined in the OrgChart.Linkg property for all nodes and their group-nodes
{color: "red", width: 2} {object}, shows the links between a node and its group-nodes in red color with a width of 2 pixels

The margins field specifies the horizontal and vertical distance between node and its descendant nodes, as an object {x,y,indent,border} type. The flow field specifies the flow and arrangement of a node and its descendant nodes within the chart. By adjusting the margins, you can create a more spacious layout or a more compact one, depending on your design preferences and the amount of information being displayed. By default, the margins field is set to null, which means that the node uses the default margins defined by the OrgChart.Margins property.

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

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

null {null}, the node and its descendant nodes uses the default margins defined by the OrgChart.Margins property
{x: 20, y: 10} {object}, node and its descendant nodes have a horizontal margin of 20 and a vertical margin of 10

The pad field defines the space between a node's content and its border. It can be a single number for all sides or an array/string for different horizontal and vertical values (e.g., 10 for all sides, "10,5" or [10,5] for 10 horizontal and 5 vertical). This allows precise control of a node's internal spacing for better layout and readability. The OrgChart.Pad property sets the default padding, which individual nodes can override with their own pad value.

The pad field 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

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

oNode.Options = {pad: 10}
oNode.SetOptions({pad: 10})
oNode.Pad = 10
oNode.SetPad(10)

null {null}, the node uses the default padding defined by the OrgChart.Pad property
10 {number}, the node has a padding of 10 pixels on all sides

The selectable field indicates whether the user can select the node. When selectable is set to false, the node cannot be selected by the user. This means that even if the node is enabled and interactive in other ways, it will not be included in the selection when the user clicks on it or uses selection tools. Setting selectable to true allows the node to be selected by the user, making it part of the selection set when clicked or when using selection tools. The Selection property defines the nodes that are currently selected within the control.

The selectable field is mapped to the Node.Selectable property, which means that the following statements are equivalent:

oNode.Options = {selectable: false}
oNode.SetOptions({selectable: false})
oNode.Selectable = false
oNode.SetSelectable(false)

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

The shape field specifies 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 field 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 shape can be defined in any of the following formats:

• 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

The shape field is mapped to the Node.Shape property, which means that the following statements are equivalent:

oNode.Options = {shape: "red"}
oNode.SetOptions({shape: "red"})
oNode.Shape = "red"
oNode.SetShape("red")

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 field defines the shapes applied to the current node and its descendants. It allows customization of the visual appearance of different parts of the control, including child nodes, assistant nodes, expand/collapse glyphs, and more. By setting the shapes field at the node level, you can override the default shapes defined for the entire chart (the OrgChart.Shapes property), enabling a distinct design for specific nodes and their hierarchy. The shape field, on the other hand, defines the shape of the node itself. When the shapes field 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 field 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

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

oNode.Options = {shapes: "red(node),blue(nodea)"}
oNode.SetOptions({shapes: "red(node),blue(nodea)"})
oNode.Shapes = "red(node),blue(nodea)"
oNode.SetShapes("red(node),blue(nodea)")

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

The show field specifies which types of direct descendant nodes the current node displays. In short, it can show or hide assistant, child, or group nodes of the current node (non-recursively). For example, you can hide the node's 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 field is useful for controlling the visibility of specific types of direct descendant nodes, allowing you to focus on particular aspects of the organizational chart or simplify the view as needed.

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

• null (null), the node shows all types of direct descendant nodes (depending on the default settings defined by the OrgChart.Show property)
• exNodeChild (1), specifies a node of child-type
• exNodeAssistant (2), specifies a node of assistant-type
• exNodeGroup (4), specifies a node of group-type

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

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

null {null}, the node shows all types of direct descendant nodes (depending on the default settings defined by the OrgChart.Show property)
exNodeChild | exNodeAssistant {number}, hides group direct descendant nodes of the current node

The showExpandGlyphs field specifies which types of nodes show the expand/collapse glyphs for a specific node (non-recursive). For example, you can show expand/collapse glyphs only for child nodes by including the exNodeChild flag and excluding the exNodeAssistant and exNodeGroup flags. The singleExpandGlyphs field specifies whether the node displays a single or multiple expand/collapse glyphs. If the showExpandGlyphs field 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 (null), the node shows expand/collapse glyphs for all types of direct descendant nodes (depending on the default settings defined by the OrgChart.ShowExpandGlyphs property)
• exNodeChild (1), specifies a node of child-type
• exNodeAssistant (2), specifies a node of assistant-type
• exNodeGroup (4), specifies a node of group-type

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

oNode.Options = {showExpandGlyphs: exontrol.OrgChart.NodeTypeEnum.exNodeChild}
oNode.SetOptions({showExpandGlyphs: exontrol.OrgChart.NodeTypeEnum.exNodeChild})
oNode.ShowExpandGlyphs(exontrol.OrgChart.NodeTypeEnum.exNodeChild)
oNode.SetShowExpandGlyphs(exontrol.OrgChart.NodeTypeEnum.exNodeChild)

null {null}, the node shows expand/collapse glyphs for all types of direct descendant nodes (depending on the default settings defined by the OrgChart.ShowExpandGlyphs property)
exNodeChild {number}, the node shows expand/collapse glyphs only for child direct descendant nodes

The singleExpandGlyphs field specifies whether the node displays a single or multiple expand/collapse glyphs. The showExpandGlyphs field specifies which types of nodes show the expand/collapse glyphs for a specific node (non-recursive). By default, the singleExpandGlyphs field is set to null, which means that the node uses the default settings defined by the OrgChart.SingleExpandGlyphs property. If singleExpandGlyphs is set to true, the node will display a single expand/collapse glyph for all its descendant nodes, regardless of their types. If set to false, the node will display separate expand/collapse glyphs for each type of descendant node as specified by the showExpandGlyphs field.

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

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

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

The size field defines the size or limits of the node's caption. The size allows you to control the dimensions of the area where the node's caption is displayed, which can be useful for maintaining a consistent layout or ensuring that captions fit within a certain space. If the size field is set to null, the node's caption will be automatically sized based on its content, meaning that the control will calculate the necessary dimensions to fit the caption text and any associated image. The caption field defines the ex-HTML label displayed by a node. The formatText field specifies the format to display the node's caption. If the size field is undefined, the control will consider the OrgChart.Size property to measure the node's caption, which allows for a consistent caption size across all nodes unless specified otherwise at the node level. The imageSize field defines the size of the node's image, and if it is undefined, the control will consider the OrgChart.ImageSize option to measure the node's image.

The size field can be any of the following:

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

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

oNode.Options = {size: 100}
oNode.SetOptions({size: 100})
oNode.Size = 100
oNode.SetSize(100)

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 field indicates whether the current node (and all its descendants node) is visible or hidden. Setting the visible field to false will hide the node and all its descendants, while setting it to true will make them visible again. The visible field is useful for temporarily hiding parts of the organizational chart without removing nodes from the control, allowing you to focus on specific sections or simplify the view as needed. The show field specifies the type(s) of direct descendant-nodes the current node shows (for instance, you can hide the node's assistant-nodes if excludes the exNodeAssistant flag), while the visible field specifies whether the current node (and all its descendants node) is visible or hidden. By default, the visible field is set to true, meaning that nodes are visible when added to the control unless specified otherwise. The root node of the chart cannot be hidden, and setting its Visible field to false hides only its descendant nodes.

The visible field is mapped to the Node.Visible property, which means that the following statements are equivalent:

oNode.Options = {visible: false}
oNode.SetOptions({visible: false})
oNode.Visible = false
oNode.SetVisible(false)

where oNode is an object of Node type.