The tree allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.

  • Renders the tree items inside default slot.

Callable

  • Returns ReactNode

Accessors

items: IgrTreeItem[]

Returns all of the tree's items.

Events

onActiveItem: (args: CustomEvent<IgrTreeItem>) => void

Emitted when the tree's

Type declaration

onItemCollapsed: (args: CustomEvent<IgrTreeItem>) => void

Emitted when tree item is collapsed.

Type declaration

onItemCollapsing: (args: CustomEvent<IgrTreeItem>) => void

Emitted when tree item is about to collapse.

Type declaration

onItemExpanded: (args: CustomEvent<IgrTreeItem>) => void

Emitted when tree item is expanded.

Type declaration

onItemExpanding: (args: CustomEvent<IgrTreeItem>) => void

Emitted when tree item is about to expand.

Type declaration

onSelection: (args: CustomEvent<IgrTreeSelectionEventArgsDetail>) => void

Emitted when item selection is changing, before the selection completes.

Type declaration

Methods

  • Collapses all of the passed items. If no items are passed, collapses ALL items.

    Parameters

    Returns void

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
    super.connectedCallback();
    addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void

  • Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection.

    Parameters

    Returns void

  • Expands all of the passed items. If no items are passed, expands ALL items.

    Parameters

    Returns void

  • Select all items if the items collection is empty. Otherwise, select the items in the items collection.

    Parameters

    Returns void

Properties

selection: TreeSelection

The selection state of the tree.

singleBranchExpand: boolean

Whether a single or multiple of a parent's child items can be expanded.

toggleNodeOnClick: boolean

Whether clicking over nodes will change their expanded state or not.

lifecycle

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
    super.connectedCallback();
    addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void