Class TreeView

A container that can show a TreeView like a hierarchy. The TreeView contains TreeViewItems.

Hierarchy (view full)

Constructors

constructor

Accessors

alignItems alignSelf allowDrag allowRenaming allowReordering binding class dom domContent enabled error filter flex flexBasis flexDirection flexGrow flexShrink flexWrap grid height hidden hiddenToRoot ignoreParent isDragging justifyContent justifySelf parent pressedCtrl pressedShift readOnly resizable resizeMax resizeMin scrollable selected style tabIndex width

Methods

_applyFilter _buildDomNode _clearFilter _findLastVisibleChildTreeItem _findNextVisibleTreeItem _findPreviousVisibleTreeItem _getChildrenRange _getTreeOrder _onChildDeselected _onChildRename _onChildSelected _openHierarchy _selectSingleItem _traverseDepthFirst append appendAfter appendBefore buildDom clear clearTreeItems deselect flash forEachChild link move prepend remove resize showDragHandle unbind unlink create register unregister

Events

EVENT_APPEND EVENT_CLICK EVENT_DESELECT EVENT_DESTROY EVENT_DISABLE EVENT_DRAGEND EVENT_DRAGSTART EVENT_ENABLE EVENT_HIDE EVENT_HIDE_TO_ROOT EVENT_HOVER EVENT_HOVER_END EVENT_PARENT EVENT_READ_ONLY EVENT_REMOVE EVENT_RENAME EVENT_REPARENT EVENT_RESIZE EVENT_SCROLL EVENT_SELECT EVENT_SHOW EVENT_SHOW_TO_ROOT

Constructors

constructor

Accessors

alignItems

alignSelf

allowDrag

allowRenaming

allowReordering

binding

class

dom

domContent

enabled

error

filter

flex

flexBasis

flexDirection

flexGrow

flexShrink

flexWrap

grid

height

hidden

hiddenToRoot

  • get hiddenToRoot(): boolean

  • Gets whether the Element is hidden all the way up to the root. If the Element itself or any of its parents are hidden then this is true.

    Returns boolean

ignoreParent

isDragging

justifyContent

justifySelf

parent

pressedCtrl

pressedShift

readOnly

resizable

  • get resizable(): string

  • Gets whether the Element is resizable and where the resize handle is located.

    Returns string

  • set resizable(value): void

  • Sets whether the Element is resizable and where the resize handle is located. Can be one of 'top', 'bottom', 'right', 'left'. Set to null to disable resizing.

    Parameters

    • value: string

    Returns void

resizeMax

resizeMin

scrollable

selected

style

tabIndex

width

Methods

Protected_applyFilter

Protected_buildDomNode

  • _buildDomNode(node): Container

  • If the current node contains a root, recursively append its children to this node and return it. Otherwise return the current node. Also add each child to the parent under its keyed name.

    Parameters

    • node: {
          children?: any;
          root?: any;
          [x: string]: any;
      }

      The current element in the dom structure which must be recursively traversed and appended to its parent.

      • [x: string]: any
      • Optionalchildren?: any

        The children of the root node.

      • Optionalroot?: any

        The root node of the dom structure.

    Returns Container

    The recursively appended element node.

Protected_clearFilter

Protected_findLastVisibleChildTreeItem

Protected_findNextVisibleTreeItem

Protected_findPreviousVisibleTreeItem

Protected_getChildrenRange

Protected_getTreeOrder

Protected_onChildDeselected

Protected_onChildRename

Protected_onChildSelected

Protected_openHierarchy

Protected_selectSingleItem

Protected_traverseDepthFirst

append

appendAfter

  • appendAfter(element, referenceElement): void

  • Appends an element to the container just after the specified reference element.

    Parameters

    • element: any

      The element to append.

    • referenceElement: any

      The element after which the element will be appended.

    Returns void

    Fires

    'append'

appendBefore

buildDom

  • buildDom(dom): void

  • Takes an array of pcui elements, each of which can contain their own child elements, and appends them to this container. These child elements are traversed recursively using _buildDomNode.

    Parameters

    • dom: any[]

      An array of child pcui elements to append to this container.

    Returns void

    Example

    buildDom([
        {
            child1: pcui.Label()
        },
        {
            root: {
                container1: pcui.Container()
            },
            children: [
                {
                    child2: pcui.Label()
                },
                {
                    child3: pcui.Label()
                }
            ]
        }
    ]);

clear

clearTreeItems

deselect

flash

forEachChild

  • forEachChild(fn): void

  • Iterate over each child element using the supplied function. To early out of the iteration, return false from the function.

    Parameters

    • fn: ((child: Element, index: number) => false | void)

      The function to call for each child element.

        • (child, index): false | void

        • Parameters

          Returns false | void

    Returns void

link

  • link(observers, paths): void

  • Links the specified observers and paths to the Element's data binding.

    Parameters

    • observers: Observer | Observer[]

      An array of observers or a single observer.

    • paths: string | string[]

      A path for the observer(s) or an array of paths that maps to each separate observer.

    Returns void

move

prepend

remove

resize

showDragHandle

unbind

  • unbind(name?, fn?): Events

  • Unbinds an event listener for the specified event name. If a callback function is provided, only that specific listener is removed. If no callback is provided, all listeners for the event are removed. If no event name is provided, all listeners for all events are removed.

    Parameters

    • Optionalname: string

      The name of the event to unbind. If not provided, all events are unbound.

    • Optionalfn: HandleEvent

      The specific callback function to remove. If not provided, all listeners for the event are removed.

    Returns Events

    The current instance for chaining.

    Example

    // Register an event listener
    const callback = (arg1, arg2) => {
        console.log('Event triggered with arguments:', arg1, arg2);
    };
    events.on('testEvent', callback);

    // Unbind the specific event listener
    events.unbind('testEvent', callback);

    // Unbind all listeners for a specific event
    events.unbind('testEvent');

    // Unbind all listeners for all events
    events.unbind();

unlink

Staticcreate

Staticregister

  • register<Type>(type, cls, defaultArguments?): void

  • Type Parameters

    • Type

    Parameters

    • type: string

      The type we want to reference this Element by.

    • cls: Object

      The actual class of the Element.

    • OptionaldefaultArguments: any

      Default arguments when creating this type.

    Returns void

Staticunregister

Events

Static ReadonlyEVENT_APPEND

EVENT_APPEND: "append" = 'append'

Fired when a child Element gets added to the Container.

Example

const container = new Container();
container.on('append', (element: Element) => {
    console.log('Element added to container:', element);
});

Static ReadonlyEVENT_CLICK

EVENT_CLICK: "click" = 'click'

Fired when the mouse is clicked on the Element but only if the Element is enabled. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('click', (evt: MouseEvent) => {
    console.log('Element clicked');
});

Static ReadonlyEVENT_DESELECT

EVENT_DESELECT: "deselect" = 'deselect'

Fired when user deselects a TreeViewItem.

Example

const treeView = new TreeView();
treeView.on('deselect', (item: TreeViewItem) => {
    console.log(`Deselected item ${item.text}`);
});

Static ReadonlyEVENT_DESTROY

EVENT_DESTROY: "destroy" = 'destroy'

Fired after the element has been destroyed. Both the DOM element and the owner Element instance are passed as parameters to the event handler.

Example

const element = new Element();
element.on('destroy', (dom: HTMLElement, element: Element) => {
    console.log('Element destroyed');
});

Static ReadonlyEVENT_DISABLE

EVENT_DISABLE: "disable" = 'disable'

Fired when the Element gets disabled.

Example

const element = new Element();
element.on('disable', () => {
    console.log('Element disabled');
});

Static ReadonlyEVENT_DRAGEND

EVENT_DRAGEND: "dragend" = 'dragend'

Fired when user stops dragging selected TreeViewItems.

Example

const treeView = new TreeView({
    allowDrag: true // this is the default but we're showing it here for clarity
});
treeView.on('dragend', () => {
    console.log('Drag ended');
});

Static ReadonlyEVENT_DRAGSTART

EVENT_DRAGSTART: "dragstart" = 'dragstart'

Fired when user starts dragging selected TreeViewItems.

Example

const treeView = new TreeView({
    allowDrag: true // this is the default but we're showing it here for clarity
});
treeView.on('dragstart', (items) => {
    console.log(`Drag started of ${items.length} items');
});

Static ReadonlyEVENT_ENABLE

EVENT_ENABLE: "enable" = 'enable'

Fired when the Element gets enabled.

Example

const element = new Element();
element.on('enable', () => {
    console.log('Element enabled');
});

Static ReadonlyEVENT_HIDE

EVENT_HIDE: "hide" = 'hide'

Fired when the Element gets hidden.

Example

const element = new Element();
element.on('hide', () => {
    console.log('Element hidden');
});

Static ReadonlyEVENT_HIDE_TO_ROOT

EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'

Fired when the Element or any of its parent get hidden.

Example

const element = new Element();
element.on('hideToRoot', () => {
    console.log('Element or one of its parents hidden');
});

Static ReadonlyEVENT_HOVER

EVENT_HOVER: "hover" = 'hover'

Fired when the mouse starts hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('hover', (evt: MouseEvent) => {
    console.log('Element hovered');
});

Static ReadonlyEVENT_HOVER_END

EVENT_HOVER_END: "hoverend" = 'hoverend'

Fired when the mouse stops hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('hoverend', (evt: MouseEvent) => {
    console.log('Element hover ended');
});

Static ReadonlyEVENT_PARENT

EVENT_PARENT: "parent" = 'parent'

Fired when the Element's parent gets set.

Example

const element = new Element();
element.on('parent', (parent: Element) => {
    console.log(`Element's parent is now ${parent}`);
});

Static ReadonlyEVENT_READ_ONLY

EVENT_READ_ONLY: "readOnly" = 'readOnly'

Fired when the readOnly property of an Element changes.

Example

const element = new Element();
element.on('readOnly', (readOnly: boolean) => {
    console.log(`Element is now ${readOnly ? 'read only' : 'editable'}`);
});

Static ReadonlyEVENT_REMOVE

EVENT_REMOVE: "remove" = 'remove'

Fired when a child Element gets removed from the Container.

Example

const container = new Container();
container.on('remove', (element: Element) => {
    console.log('Element removed from container:', element);
});

Static ReadonlyEVENT_RENAME

EVENT_RENAME: "rename" = 'rename'

Fired when user renames a TreeViewItem.

Example

const treeView = new TreeView();
treeView.on('rename', (item: TreeViewItem, name: string) => {
    console.log(`Renamed item to ${name}`);
});

Static ReadonlyEVENT_REPARENT

EVENT_REPARENT: "reparent" = 'reparent'

Fired when user reparents TreeViewItems.

Example

const treeView = new TreeView();
treeView.on('reparent', (reparented: { item: TreeViewItem; oldParent: Element; }[]) => {
    console.log(`Reparented ${reparented.length} items`);
});

Static ReadonlyEVENT_RESIZE

EVENT_RESIZE: "resize" = 'resize'

Fired when the container gets resized using the resize handle.

Example

const container = new Container();
container.on('resize', () => {
    console.log('Container resized to:', container.width, container.height, 'px');
});

Static ReadonlyEVENT_SCROLL

EVENT_SCROLL: "scroll" = 'scroll'

Fired when the container is scrolled. The native DOM scroll event is passed to the event handler.

Example

const container = new Container();
container.on('scroll', (event: Event) => {
    console.log('Container scrolled:', event);
});

Static ReadonlyEVENT_SELECT

EVENT_SELECT: "select" = 'select'

Fired when user selects a TreeViewItem.

Example

const treeView = new TreeView();
treeView.on('select', (item: TreeViewItem) => {
    console.log(`Selected item ${item.text}`);
});

Static ReadonlyEVENT_SHOW

EVENT_SHOW: "show" = 'show'

Fired when the Element stops being hidden.

Example

const element = new Element();
element.on('show', () => {
    console.log('Element shown');
});

Static ReadonlyEVENT_SHOW_TO_ROOT

EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'

Fired when the Element and all of its parents become visible.

Example

const element = new Element();
element.on('showToRoot', () => {
    console.log('Element and all of its parents shown');
});

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods
Events