class Tree

Extends:

UIComponent

Description:

A Tree component shows a list items but in a child/parent structure.

Like in a List component the items can hold custom id and value data in addition to text, icon, tooltip, font object, background, and color.

The Tree component can be customized the way it's displayed by methods Tree > showRoot, Tree > showRootHandle, Tree > showIcons, and Tree > expanded.

Items are identified by their unique index path, which is an array of each index, starting from root element [0]. Example index of an item can be [0, 3, 2] where first element is an index of root element (always [0]), and child's index, and then its child.

Items can be easily added using Tree > add, removed using Tree > remove, updated and retrieved using Tree > item, and moved from one parent to another using Tree > moveItem.

All other Tree methods not on this page are inherited from UIComponent.

Constructor

constructor([root_text])

Creates an instance of Tree component object.

Parameters:

Members

• [ readonly ] container
• [ readonly ] id
• [ readonly ] parent
• [ readonly ] screenPosition

Methods

From this class:

• add()
• childCount()
• clear()
• clicksToEdit()
• collapseAll()
• editing()
• expandAll()
• expanded()
• findByID()
• findByText()
• findByValue()
• focusedItem()
• icons()
• item()
• items()
• moveItem()
• moveItems()
• onItemsEvents()
• scrollToIndex()
• selected()
• selectionMode()
• showIcons()
• showRoot()
• showRootHandle()

Inherited from UIComponent:

• addTo()
• anchor()
• background()
• border()
• bottom()
• center()
• color()
• contextMenu()
• cursor()
• destroy()
• dragAction()
• dragData()
• dragDataType()
• dropAction()
• dropDataType()
• dropMode()
• emit()
• emitFocusKeyEvents()
• enabled()
• focusable()
• focused()
• font()
• getAncestor()
• getWindow()
• height()
• hide()
• icon()
• index()
• isInside()
• layer()
• maxSize()
• minSize()
• move()
• onAction()
• onAncestorEvents()
• onChange()
• onComponentEvents()
• onDispose()
• onDragEvents()
• onDropEvents()
• onError()
• onFocusEvents()
• onKey()
• onMouseEvents()
• onMouseMotion()
• onMouseWheel()
• onPropertyChange()
• onScroll()
• opacity()
• position()
• remove()
• right()
• scrollbars()
• scrollBarSize()
• scrollIncrement()
• scrollPosition()
• selectAll()
• selection()
• size()
• smoothScrolling()
• snapshot()
• text()
• tooltip()
• undoEnabled()
• undoLimit()
• updateUI()
• verifyComponent()
• visible()
• width()
• x()
• y()

Examples:

// Format of tree item object (Only "text" is requited, other fields are optional)
{
    text: string,           // Item text (Required)
    [id]: string|number,    // Value that can be used by software logic to identify this item
    [value]: string|number, // Additional value to be stored in the item for later use.
    [icon]: string,         // Absolute or relative path to icon image, base64 encoded image string, or `null` to remove icon.
    [color]: string,        // Item text color as a 6 character hex encoded color string (e.g. #665500)
    [background]: string,   // Item background color as a 6 character hex encoded color string (e.g. #665500)
    [tooltip]: string,      // Tooltip text to show when pointer hover the item. (in List and Tree components only)
    [font]: font object     // Object{name: string, size: number, bold: boolean, ...}. See complete list of font properties in example of font() method.
    [children]:object[]     // An array of children (when adding or recursively retrieving).
}