Element class (Swimlane)

Element(oElements, oElementOptsopt)

new Element(oElements, oElementOptsopt)

The Element object holds information(options) about an element within the control.

Every option of the ElementOptions type has associated a property of the element. For instance, the option:

caption {string}, defines the element's caption
is associated with the property:
Caption {string}, defines the element's caption
which means that the following statements are equivalent:
oElement.Options = {caption: "name"}
oElement.SetOptions({caption: "name"})
oElement.Caption = "name"
oElement.SetCaption("name")
where oElement is an object of Element type
Parameters:
Name Type Attributes Description
oElements Elements Indicates an object of Elements type that's the owner collection of this element.
oElementOpts ElementOptions <optional>
 defines the element's caption or options as an object of ElementOptions type.

Members

AutoSize :boolean

The AutoSize property automatically resizes the element to fit its content. The Client property defines the element's client area as an array of [x, y, width, height]. When AutoSize is set to true, the element's size is determined by its content, including the caption and image, and the Client area is automatically adjusted to fit this content. This ensures that all information is displayed correctly without manual resizing. When AutoSize is false, the size of the element can be manually specified using the Client property, allowing precise control over the layout and appearance of the element on the surface control.
Type:
  • boolean
Since:
  • 2.2
Example
true {boolean}, automatically resizes the element to fit its content (in this case the Client property determines only the position of the element, while its size is determined by its content)
false {boolean}, does not automatically resize the element to fit its content (allows manual sizing using the Client property)
AutoSize

Caption :string

The Caption property defines the element's caption. The caption represents the text or content displayed on the element. The caption can include plain text, ex-HTML tags for formatting (such as <b>), or references to images (using <img> tags). The FormatText property specifies how the element's caption is formatted, while the AutoSize property indicates whether the element's size is automatically computed based on its content.
Type:
  • string
Example
null {null}, indicates no caption
"caption" {string}, declares a plain-caption
"&lt;b&gt;text&lt;/b&gt;" {string}, displays the text in bold
"&lt;img&gt;logo&lt;/img&gt;" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add method
Caption

Client :Array.<number>

The Client property defines the element's client area as an array [x, y, width, height]. It specifies the position and size of the element's content area, allowing precise control over layout. When AutoSize property is false, the Client property can be used to manually manage the element's dimensions and arrange its content, ensuring it is displayed correctly within the element. The Resizable property specifies whether the user can resize the element by drag and drop. The Movable property indicates whether the user can move the element by drag and drop.
Type:
  • Array.<number>
Example
null {null}, defines an element quivalent with [0,0,32,32]
[0,0,128,128] {number[]}, defines the element at the center of the control of 128 x 128 pixels size
Client

Cursor :any

The Cursor property defines the mouse cursor for an individual element. The "element" part of the control's Cursors property sets the default cursor for all elements. The Cursor property can be set to any valid CSS cursor value, such as "pointer", "default", "move", or "crosshair". Using a custom cursor provides visual feedback about the element's interactivity. For example, "pointer" indicates the element is clickable, while "move" suggests it can be dragged, improving the user experience on the surface control.
Type:
  • any
Example
null {null}, indicates that the element uses the default cursor ("element" part of the Cursors property)
"pointer" {string}, sets the mouse cursor to "pointer", which indicates that the element is clickable
"move" {string}, sets the mouse cursor to "move", which indicates that the element can be dragged
"crosshair" {string}, sets the mouse cursor to "crosshair", which indicates a precise selection area, often used for drawing or selecting specific points on the surface
Cursor

Enabled :boolean

The Enabled property enables or disables an element. When Enabled is set to false, the element becomes disabled and appears as disabled. The disabled attribute of the shape applied to the element defines its visual appearance in this state. The Selectable property specifies whether the user can select, move, or resize the element, so both properties can be combined to control the element's interactivity. For example, you can set Enabled to false to disable the element and Selectable to false to prevent the user from selecting, moving, or resizing it. When Enabled is true, the element can be interacted with normally. By default, Enabled is true, but it can be changed at any time to enable or disable individual elements.
Type:
  • boolean
Example
false {boolean}, disables the element
true {boolean}, enables the element
Enabled

Expand :boolean

The Expand property expands or collapses the element. When set to false, all child elements are hidden, which helps create a cleaner and more organized interface. The Parent property defines the element's parent, and the Position property specifies the element's z-order, where 0 is the background and higher values are displayed on top; for child elements, the position is relative to their siblings.
Type:
  • boolean
Example
true {boolean}, expands the element (making all its child elements visible)
false {boolean}, collapses the element (hiding all its child elements)
Expand

FormatText :exontrol.DrawTextFormatEnum

The FormatText property defines how the element's caption is displayed. The Caption property defines the text or content of the element. The FormatText property 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 display text on a single line. The exontrol.DrawTextFormatEnum type defines the available flags that can be combined to achieve the desired text formatting.

The exontrol.DrawTextFormatEnum type support the following flags:

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

 oElement.SetFormatText(value) {exontrol.DrawTextFormatEnum}, sets the format to display the element's caption
 oElement.FormatText = value {exontrol.DrawTextFormatEnum}, sets the format to display the element's caption

where oElement is an object of Element type
FormatText

Image :string

The Image property assigns an image to the element by specifying the name of the image or picture to be displayed. Images can be added using the exontrol.HTMLPicture.Add method. The ImageSize property defines the size of the element's image, while the ImageAlign property defines its alignment within the element. Although the <img> tag can be used in the caption to display an image, the Image property provides a more direct way to associate an image with an element. By setting the Image property, you can manage and update the image displayed on the element without modifying the caption's HTML content, offering greater flexibility and a clear separation of concerns when designing the layout and appearance of your surface control.
Type:
  • string
Example
null {null}, indicates that the element displays no image
"logo" {string}, indicates that the element displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add method
Image

ImageAlign :number

The ImageAlign property defines the alignment of the image within the element. The image can be aligned to the left, right, top, or bottom of the element's caption. By default, it is aligned to the left. This property allows you to control the layout of the image relative to the text, enabling visually balanced and appealing designs. For example, aligning the image to the top creates a more vertical layout, while aligning it to the right can balance the element's visual weight.

The ImageAlign property supports the following values:

  • {null}, the image is aligned according to the control's imageAlign option (Swimlane.ImageAlign property), so the element'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
Type:
  • number
Example
null {null}, the image is on top of the node's cation (default value)
1 {number}, the image is displayed to the left of the node's caption
ImageAlign

ImageSize :undefined|null|number|Array.<number>

The ImageSize property defines the size of the element's image. The ImageAlign property defines the alignment of the image within the element. The ImageSize property can be set in various ways to control how the image is displayed. For example, setting ImageSize to null displays the image at its full size, while setting it to a number scales the image to fit within a square of that size. You can also specify an array [width, height] to define limits for scaling or stretching the image.

The ImageAlign property supports the following values:

  • {undefined}, indicates that the control's imageSize option (Swimlane.ImageSize property) is considered, so the element's image is measured according to the control's imageSize option.
  • {null}, indicates that the element's image is displayed as it is (full-sized).
  • {number}, specifies that the element's image is displayed into a square of giving size (same width and height). If 0 the element displays no image, if negative the element's image is stretched to giving square, else the node's picture is scaled to fit the giving rectangle.
  • {number[]}, specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the node's picture to scale or stretch to.
Type:
  • undefined | null | number | Array.<number>
Example
null {null}, indicates that the element's image is displayed as it is (full-sized).
0 {number}, no image is displayed
64 {number}, the image is scaled to fit a 64 x 64 rectangle
-64 {number}, the image is strected to a 64 x 64 rectangle
[32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
[-32,-64] {array}, stretches the image to a 32 x 64 rectangle
ImageSize

(readonly) Index :number

The Index property retrieves the element's index. The index is a zero-based number that indicates the element's position within the Elements collection. The index of the first element is 0, the index of the second element is 1, and so on. The Index property is automatically updated when adding or removing elements from the collection. When an element is removed, the indexes of the remaining elements are updated accordingly. The index of an element can be used to access it through the Elements.Item(index) method, which retrieves an element by its index. The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent.
Type:
  • number
Example
The following statements are equivalent:

 oElement.GetIndex() {number}, gets the element's index
 oElement.Index {number}, gets the element's index

where oElement is an object of Element type
Index

Key :string

The Key property defines the element's key. The key is a string value that uniquely identifies the element, allowing it to be easily referenced and manipulated in code. For example, the method Swimlane.Element("key") retrieves the element associated with the specified key. This is useful when multiple elements exist on the surface and specific elements must be accessed without iterating through all of them. If no key is defined, the element can be requested using its plain caption or its index. The plain caption contains no ex-HTML tags (such as <b>, <fgcolor>, and so on) and represents the caption's text without formatting.
Type:
  • string
Example
"logo" {string}, defines the element with the giving key (logo). You can use the Root.Item("logo") method to request the element giving its key.
Key

Lane :object

The Lane property defines the element's lane. A lane is a horizontal subdivision of a pool used to group elements, and an element belongs to a lane when its center point lies within the lane's area. The phase field specifies the phase of the pool that hosts the element. An element can be moved to a different lane or phase by updating the Lane or Phase properties, or by using the Center() method to position the element within another lane or phase. Setting the element's Lane property moves it to the new lane within the current pool and phase. It keeps its current phase if it exists in that lane; otherwise, it goes to the center of that lane. Use the Center() method to place the element in a specific phase.

The setter of the Lane property accepts any of the following types of values:

  • id {number}, indicates a numeric value that defines the index of the lane
  • id {string}, specifies the caption of the lane
  • id {object}, specifies an object of {Index,Caption} type as explained:
    • Index {number}, specifies the index of the lane (zero-based)
    • Caption {string}, indicates the caption of the lane

The getter of the Lane property returns null (the element is not hosted by any lane) or an object of PoolSplitter type

Type:
  • object
Since:
  • 1.7
Example
The following statements are equivalent (moves the first-element to the first pool, lane named "2" and phase named "A"):

 oSwimlane.Element(0).Center(0, "2", "A");

or 

 var oElement = oSwimlane.Element(0);
 oElement.Pool = 0;
 oElement.Lane = "2";
 oElement.Phase = "A";

where oSwimlane is the control's object variable
Lane

Movable :boolean

The Movable property specifies whether the user can move the element by drag and drop. When Movable is true, users can click and drag the element to reposition it on the surface control, allowing for a more interactive and customizable layout. The Resizable property specifies whether the user can resize the element by drag and drop. The AutoSize property indicates whether the element's size is automatically computed based on its content. The Client property defines the element's client area as an array of [x, y, width, height] type. The "move" action must be included in the control's AllowActions property to enable moving the element via drag-and-drop.
Type:
  • boolean
Since:
  • 2.2
Example
true {boolean}, allows the user to move the element by drag and drop
false {boolean}, does not allow the user to move the element by drag and drop
Movable

Options :ElementOptions

The Options property defines the element's options (visibility, caption, ...) at once. This method allows you to update multiple settings of an element in a single call, providing a convenient way to modify the element's appearance and behavior on the surface control. You can pass an object of ElementOptions type with the desired properties to change, and the method will apply those changes to the element accordingly.

Every option of the ElementOptions type has associated a property of the element. For instance, the option:

caption {string}, defines the element's caption
is associated with the property:
Caption {string}, defines the element's caption
Type:
Example
{caption: "name", autoSize: true} {ElementOptions}, changes the element's caption to "name" and resizes the element to fit its content
Options

Pad :number|Array.<number>|string

The Pad property defines the space between an element's content and its border. It can be a single number for equal horizontal and vertical padding, or a pair of values ("x,y" or [x, y]) for different horizontal and vertical padding. For example, 8 adds 8 pixels on all sides, while "8,4" adds 8 pixels horizontally and 4 pixels vertically. The Swimlane.Pad property defines the default padding for all elements.

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
Type:
  • number | Array.<number> | string
Example
null {null}, indicates that the default padding value of [4,4] is applied
0 {number}, indicates no padding
"8,4" {string}, increases the node's width with 2 * 8-pixels and node's height with 2 * 4-pixels
[8,4] {array}, increases the node's width with 2 * 8-pixels and node's height with 2 * 4-pixels
Pad

Parent :any

The Parent property defines the element's parent, allowing you to create hierarchical relationships between elements. The Expand property indicates whether the element is expanded or collapsed. The Position property specifies the element's position in the z-order, where 0 is the background and higher values are displayed on top; for child elements, the position is relative to their siblings. When a parent element is collapsed, all its child elements are also hidden, enabling you to manage the visibility of groups of elements together.

The value of the Parent property (setter) can be any of the following:

  • {null}, indicates that the element has no parent (root element)
  • {number}, indicates a numeric value that defines the index of the parent's element
  • {string}, specifies a string expression that defines the identifier/key/plain-caption of the parent's element
  • {Element}, specifies the object reference to the parent's element

The Parent property (getter) returns the element's parent as an object of Element type. The Parent property returns null if the element has no parent (root element).

Type:
  • any
Example
0 {number}, indicates that the element with the index 0 is the parent of the current element
"key" {string}, specifies that the parent of the current element is the element with the giving key
Parent

Phase :PoolSplitter

The SetPhase() method changes the element's phase (moves the element to a different phase). A phase is a vertical subdivision of a pool used to group elements, and an element belongs to a phase when its center point lies within the phase's area. The lane field specifies the lane of the pool that hosts the element. An element can be moved to a different lane or phase by updating the Lane or Phase properties, or by using the Center() method to position the element within another lane or phase. Setting the element's Phase property moves it to the new phase within the current pool and lane. It keeps its current lane if it exists in that phase; otherwise, it goes to the center of that phase. Use the Center() method to place the element in a specific lane.

The setter of the Phase property accepts any of the following types of values:

  • id {number}, indicates a numeric value that defines the index of the phase
  • id {string}, specifies the caption of the phase
  • id {object}, specifies an object of {i(ndex),c(aption)} type as explained:
    • i(ndex) {number}, specifies the index of the phase (zero-based)
    • c(caption) {string}, indicates the caption of the phase

The getter of the Phase property returns null (the element is not hosted by any phase) or an object of PoolSplitter type

Type:
Since:
  • 1.7
Example
The following statements are equivalent (moves the first-element to the first pool, lane named "2" and phase named "A"):

 oSwimlane.Element(0).Center(0, "2", "A");

or 

 var oElement = oSwimlane.Element(0);
 oElement.Pool = 0;
 oElement.Lane = "2";
 oElement.Phase = "A";

where oSwimlane is the control's object variable
Phase

Pool :Pool

The Pool property defines the element's pool. An element belongs to a pool when its center point lies within the pool's client area. A pool contains lanes and phases, so the element is also associated with the lane and phase that include its center point. The Lane property specifies the lane of the pool that hosts the element, while the Phase property specifies the phase of the pool that hosts the element. An element can be moved to a different pool, lane, or phase by updating the Lane or Phase properties, or by using the Center() method to position the element within another pool, lane, or phase. Setting the element's Pool property moves it to the new pool. It keeps its current lane and phase if they exist in that pool; otherwise, it goes to the pool's center. Use the Center() method to place the element in a specific lane and phase.

The setter of the Pool property accepts any of the following types of values:

  • id {number}, indicates a numeric value that defines the index of the newly pool
  • id {string}, specifies a string expression that defines the identifier/key/plain-caption of the newly pool
  • id {Pool}, specifies the object reference to the newly pool

The getter of the Pool property returns null (the element is not hosted by any pool) or an object of Pool type that specifies the element's pool

Type:
Since:
  • 1.7
Example
The following statements are equivalent (moves the first-element to the first pool, lane named "2" and phase named "A"):

 oSwimlane.Element(0).Center(0, "2", "A");

or 

 var oElement = oSwimlane.Element(0);
 oElement.Pool = 0;
 oElement.Lane = "2";
 oElement.Phase = "A";

where oSwimlane is the control's object variable
Pool

Position :number

The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent. This property allows you to control the stacking order of elements on the surface control, ensuring that important elements are displayed prominently, while less critical ones can be placed in the background.
Type:
  • number
Example
0 {number}, places the element in the background
n {number}, where n is a value higher than 0 (displays the element on top of the elements with position lower than n)
Position

Resizable :boolean

The Resizable property specifies whether the user can resize the element by drag and drop. When Resizable is true, users can click and drag the edges or corners of the element to adjust its size. The Movable property specifies whether the user can move the element by drag and drop. The AutoSize property indicates whether the element's size is automatically computed based on its content. The Client property defines the element's client area as an array of [x, y, width, height]. The "move" action must be included in the control's AllowActions property to enable moving the element via drag-and-drop.
Type:
  • boolean
Since:
  • 2.2
Example
true {boolean}, allows the user to resize the element by drag and drop
false {boolean}, does not allow the user to resize the element by drag and drop
Resizable

Selectable :boolean

The Selectable property enables or disables the user's ability to select, move, or resize the element. When Selectable is set to false, the element cannot be selected, moved, or resized by the user. This property is useful when certain elements should remain visible but not interactable, such as background elements that provide context. When Selectable is true, the user can select, move, and resize the element normally. By default, Selectable is true, allowing full interaction with the element.
Type:
  • boolean
Since:
  • 1.7
Example
false {boolean}, the user can't select, resize or move the element
true {boolean}, the user can select, resize or move the element
Selectable

Shape :any

The Shape property defines the shape of an individual element. While the element part of the Shapes property sets the default shape for all elements, the Shape property allows you to specify a unique shape for a single element. This enables visually distinct elements on the surface, improving usability and making it easier to differentiate between them. The Shape property accepts various types of values to customize the element's appearance. The disabled attribute of the shape determines how the element looks when it is disabled.

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

  • {null}, no custom-shape is applied
  • the shape's name within the exontrol.Shapes.Swimlane 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
Type:
  • any
Example
"red" {string}, applies the "red" color as a shape for the element (applied only for known colors)
Shape

Visible :boolean

The Visible property determines whether an element is displayed on the surface. When set to true, the element is shown and can be interacted with by the user. When set to false, the element is hidden and cannot be interacted with. This property allows you to dynamically show or hide elements based on user actions or application conditions. By default, Visible is true, so elements are visible when created, and it can be modified at any time to control the visibility of individual elements.
Type:
  • boolean
Example
false {boolean}, hides the element
true {boolean}, shows the element
Visible

Methods

Add(oElementOpts) → {Element}

The Add() method inserts a new child-element. The new element is created by the given options as an object of ElementOptions type. The Elements.Add() method is used to programmatically add a new element into the control, while the OnCreate() method allows customizing the options for a newly created element when it is added by drag and drop. The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent.
Parameters:
Name Type Description
oElementOpts ElementOptions Specifies the options to create the new element as an object of ElementOptions type.
Since:
  • 1.1
Returns:
Returns the newly created child-element, as an object of Element type
Type
Element
Example
oSwimlane.Elements.Add("Parent").Add("Child").Add("Sub-Child")
Add

BringForward() → {number}

The BringForward() method moves the element up one level, so that it is closer to top of the stacking order. The BringToFront() method moves the element to the top of the stacking order, so that it is in front of other elements. The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent. This property allows you to control the stacking order of elements on the surface control, ensuring that important elements are displayed prominently, while less critical ones can be placed in the background.
Returns:
Returns the element's previously position
Type
number
Example
oElement.BringForward() {number}, moves the element up one level so that it is closer to top of the stacking order
BringForward

BringToFront() → {number}

The BringToFront() method moves the element to the top of the stacking order, so that it is in front of other elements. The BringForward() method moves the element up one level, so that it is closer to top of the stacking order. The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent. This property allows you to control the stacking order of elements on the surface control, ensuring that important elements are displayed prominently, while less critical ones can be placed in the background.
Returns:
Returns the element's previously position
Type
number
Example
oElement.BringToFront() {number}, moves the element to the top of the stacking order, so that it is in front of other elements (returns the element's previously position)
BringToFront

Center(pool, lane, phase)

The Center() method centers the element within specified pool, lane or/and phase. The Center method moves the element to a different pool, lane, or phase by updating the element's position to be centered within the specified pool, lane, or phase. An element belongs to a pool when its center point lies within the pool's client area. A pool contains lanes and phases, so the element is also associated with the lane and phase that include its center point. The Lane property specifies the lane of the pool that hosts the element, while the Phase property specifies the phase of the pool that hosts the element. Setting the element's Pool property moves it to the new pool. It keeps its current lane and phase if they exist in that pool; otherwise, it goes to the pool's center. Use the Center() method to place the element in a specific lane and phase.
Parameters:
Name Type Description
pool any The pool parameter could be any of the following:
  • pool {(undefined|null)}, specifies that the element's pool is not changed (current pool)
  • pool {number}, indicates a numeric value that defines the index of the newly pool
  • pool {string}, specifies a string expression that defines the identifier/key/plain-caption of the newly pool
  • pool {Pool}, specifies the object reference to the newly pool
lane any The lane parameter could be any of the following:
  • lane {(undefined|null)}, specifies that the element's lane is not changed (current lane)
  • lane {number}, indicates a numeric value that defines the index of the lane
  • lane {string}, specifies the caption of the lane
  • lane {object}, specifies an object of {i(ndex),c(aption)} type as explained:
    • i(ndex) {number}, specifies the index of the lane (zero-based)
    • c(caption) {string}, indicates the caption of the lane
phase any The phase parameter could be any of the following:
  • phase {(undefined|null)}, specifies that the element's phase is not changed (current phase)
  • phase {number}, indicates a numeric value that defines the index of the phase
  • phase {string}, specifies the caption of the phase
  • phase {object}, specifies an object of {i(ndex),c(aption)} type as explained:
    • i(ndex) {number}, specifies the index of the phase (zero-based)
    • c(caption) {string}, indicates the caption of the phase
Since:
  • 1.7
Example
The following statements are equivalent (moves the first-element to the first pool, lane named "2" and phase named "A"):

 oSwimlane.Element(0).Center(0, "2", "A");

or 

 var oElement = oSwimlane.Element(0);
 oElement.Pool = 0;
 oElement.Lane = "2";
 oElement.Phase = "A";

where oSwimlane is the control's object variable
Center

EndUpdateElement(startUpdateElement)

The EndUpdateElement() method adds programmatically updated properties of the element to undo/redo queue. You can use the StartBlockUndoRedo / EndBlockUndoRedo methods to group multiple Undo/Redo operations into a single-block. The AllowUndoRedo property specifies whether the control supports undo/redo operations for objects (elements, links, ...). No entry is added to the Undo/Redo queue if no property is changed for the current element.
Parameters:
Name Type Description
startUpdateElement any Holds the result of a StartUpdateElement() method.
Since:
  • 2.0
Example
The following statements are equivalent:
 
 var oStartElementUpdate = oElement.StartUpdateElement(); // {object} holds undefined (no undo-redo supported) or a copy of the element's properties
 // ... changes properties of the element programmatically
 oElement.EndUpdateElement(oStartElementUpdate);

or

 oElement.UpdateElement(function()
 {
  // ... changes properties of the element programmatically
 });

where oElement is an object of Element type
EndUpdateElement

EnsureVisible()

The EnsureVisible() method expands the parent-elements and scrolls the control's content so the element fits the control's client area. The Expand property indicates whether the element is expanded or collapsed. The Parent property defines the element's parent, and the Position property specifies the element's z-order, where 0 is the background and higher values are displayed on top; for child elements, the position is relative to their siblings. When a parent element is collapsed, all its child elements are also hidden, enabling you to manage the visibility of groups of elements together. The EnsureVisible() method is particularly useful when you want to bring a specific element into view, especially if it is nested within collapsed parent elements. By calling EnsureVisible(), you can ensure that the element is visible to the user, regardless of its position in the hierarchy or the current state of its parent elements.
Since:
  • 2.0
Example
oElement.EnsureVisible() {method}, expands the parent-elements and scrolls the control's content so the element fits the control's client area
EnsureVisible

Remove()

The Remove() method removes the element itself from its collection. Removing an element also removes all its descendant elements and any links that use the element or any of its descendant elements as a source or target. The Remove() method is equivalent to the Elements.Remove() method. The RemoveSelection() method deletes the selected-elements.
Example
The following statements are equivalent:

 oSwimlane.Element(id).Remove(), removes the element giving its index, identifier/key or reference
 oSwimlane.Elements.Remove(id), removes the element giving its index, identifier/key or reference

where oSwimlane is an object of Swimlane type
Remove

SendBackward() → {number}

The SendBackward() method moves the element down one level, so that it is closer to the bottom of the stacking order. The SendToBack() method moves the element to the bottom of the stacking order, so that it is behind the other elements. The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent. This property allows you to control the stacking order of elements on the surface control, ensuring that important elements are displayed prominently, while less critical ones can be placed in the background.
Returns:
Returns the element's previously position
Type
number
Example
oElement.SendBackward() {number}, moves the element down one level, so that it is closer to the bottom of the stacking order
SendBackward

SendToBack() → {number}

The SendToBack() method moves the element to the bottom of the stacking order, so that it is behind the other elements. The SendBackward() method moves the element down one level, so that it is closer to the bottom of the stacking order. The Position property defines the element's position and determines its z-order on the surface. A value of 0 places the element in the background, while higher values cause the element to be displayed on top of lower-positioned elements. If the element is a child of another element, its position is relative to its siblings within that parent. This property allows you to control the stacking order of elements on the surface control, ensuring that important elements are displayed prominently, while less critical ones can be placed in the background.
Returns:
Returns the element's previously position
Type
number
Example
oElement.SendToBack() {number}, moves the element to the bottom of the stacking order, so that it is behind the other elements
SendToBack

StartUpdateElement() → {object}

The StartUpdateElement() method starts changing properties of the element, so EndUpdateElement method adds programmatically updated properties to undo/redo queue. You can use the StartBlockUndoRedo / EndBlockUndoRedo methods to group multiple Undo/Redo operations into a single-block. The AllowUndoRedo property specifies whether the control supports undo/redo operations for objects (elements, links, ...). No entry is added to the Undo/Redo queue if no property is changed for the current element. The UpdateElement method automatically calls the StartUpdateElement / EndUpdateElement methods, so you can use the UpdateElement method instead of calling these methods separately.
Since:
  • 2.0
Returns:
Returns undefined (no undo/redo is allowed) or an object to be passed to EndUpdateElement method.
Type
object
Example
The following statements are equivalent:
 
 var oStartElementUpdate = oElement.StartUpdateElement(); // {object} holds undefined (no undo-redo supported) or a copy of the element's properties
 // ... changes properties of the element programmatically
 oElement.EndUpdateElement(oStartElementUpdate);

or

 oElement.UpdateElement(function()
 {
  // ... changes properties of the element programmatically
 });

where oElement is an object of Element type
StartUpdateElement

ToggleExpand()

The ToggleExpand() method toggles the element's expand state. When the element is expanded, calling this method will collapse it, hiding all child elements. Conversely, if the element is collapsed, calling this method will expand it, making all child elements visible. The Expand property expands or collapses the element. When set to false, all child elements are hidden, which helps create a cleaner and more organized interface. The Parent property defines the element's parent, and the Position property specifies the element's z-order, where 0 is the background and higher values are displayed on top; for child elements, the position is relative to their siblings.
Example
oElement.ToggleExpand(), toggles the element's expand state
ToggleExpand

UpdateElement(callback, thisArg)

The UpdateElement() method records the changes of element's properties into control's Undo/Redo queue. You can use the StartBlockUndoRedo / EndBlockUndoRedo methods to group multiple Undo/Redo operations into a single-block. The AllowUndoRedo property specifies whether the control supports undo/redo operations for objects (elements, links, ...). No entry is added to the Undo/Redo queue if no property is changed for the current element. The UpdateElement() method automatically calls the StartUpdateElement / EndUpdateElement methods, so you can use the UpdateElement() method instead of calling these methods separately.
Parameters:
Name Type Description
callback callback Specifies a function of callback() type.
thisArg any Indicates the value of "this" keyword during the callback, or the object itself if missing.
Example
The following statements are equivalent:
 
 var oStartElementUpdate = oElement.StartUpdateElement(); // {object} holds undefined (no undo-redo supported) or a copy of the element's properties
 // ... changes properties of the element programmatically
 oElement.EndUpdateElement(oStartElementUpdate);

or

 oElement.UpdateElement(function()
 {
  // ... changes properties of the element programmatically
 });

where oElement is an object of Element type
UpdateElement