The tree-item component represents a child item of the tree component or another tree item.
- Slots
-
default— Renders nested tree-item component. -
label— Renders the tree item container. -
indicator— Renders the expand indicator container. -
loading— Renders the tree item loading indicator container. -
indentation— Renders the container (by default the space) before the tree item.
- CSS Parts
wrapper— The wrapper for the tree item.selected— Indicates selected state. Applies to `wrapper`.focused— Indicates focused state. Applies to `wrapper`.active— Indicates an active state. Applies to `wrapper`.indicator— The expand indicator of the tree item.label— The tree item content.text— The tree item displayed text.select— The checkbox of the tree item when selection is enabled.
Properties
Section titled "Properties"active
Section titled "active"Marks the item as the tree's active item.
active: booleandisabled
Section titled "disabled"Get/Set whether the tree item is disabled. Disabled items are ignored for user interactions.
disabled: booleanexpanded
Section titled "expanded"The tree item expansion state.
expanded: booleanlabel
Section titled "label"The tree item label.
label: stringlevel
Section titled "level"The depth of the item, relative to the root.
level: numberloading
Section titled "loading"To be used for load-on-demand scenarios in order to specify whether the item is loading data.
loading: booleanparent
Section titled "parent"The parent item of the current tree item (if any)
parent: IgrTreeItemComponentselected
Section titled "selected"The tree item selection state.
selected: booleanA reference to the tree the item is a part of.
tree: IgrTreeComponentvalue
Section titled "value"The value entry that the tree item is visualizing. Required for searching through items.
value: anyAccessors
Section titled "Accessors"The full path to the tree item, starting from the top-most ancestor.
get path(): IgrTreeItemComponent[]Returns IgrTreeItemComponent[]
Methods
Section titled "Methods"collapse
Section titled "collapse"Collapses the tree item.
collapse(): voidReturns void
collapseWithEvent
Section titled "collapseWithEvent"Collapses the tree item.
collapseWithEvent(): Promise<void>Returns Promise<void>
connectedCallback
Section titled "connectedCallback"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.
``
Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
connectedCallback(): voidReturns void
disconnectedCallback
Section titled "disconnectedCallback"Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.
``
An element may be re-connected after being disconnected.
disconnectedCallback(): voidReturns void
expand
Section titled "expand"Expands the tree item.
expand(): voidReturns void
expandWithEvent
Section titled "expandWithEvent"Expands the tree item.
expandWithEvent(): Promise<void>Returns Promise<void>
getChildren
Section titled "getChildren"Returns a collection of child items. If the parameter value is true returns all tree item's direct children, otherwise - only the direct children.
getChildren(options: object): IgrTreeItemComponent[]Parameters
- options:
object
Returns IgrTreeItemComponent[]
toggle
Section titled "toggle"Toggles tree item expansion state.
toggle(): void