# TreeView

Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md)

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeView/index.ts#L79

A container that can show a TreeView like a hierarchy. The TreeView contains
a hierarchy of [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s.

## Constructors

### constructor

```ts
new TreeView(args?: Readonly<TreeViewArgs>)
```

Creates a new TreeView.

**Parameters**

- `args` (`Readonly<`[`TreeViewArgs`](https://api.playcanvas.com/pcui/interfaces/TreeViewArgs.md)`>`, optional, default `{}`): The arguments.

## Properties

### allowRenaming

```ts
allowRenaming: boolean = false
```

Determines whether renaming [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s is allowed by double clicking on them.

### allowReordering

```ts
allowReordering: boolean = true
```

Determines whether reordering [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s is allowed.

## Accessors

### allowDrag

```ts
get allowDrag(): boolean
set allowDrag(value: boolean)
```

Gets whether dragging a TreeViewItem is allowed.

### filter

```ts
get filter(): string
set filter(value: string)
```

Gets the filter that searches TreeViewItems and only shows the ones that are relevant to the filter.

### isDragging

```ts
get isDragging(): boolean
set isDragging(value: boolean)
```

Gets whether a TreeViewItem is currently being dragged.

### pressedArrow

```ts
get pressedArrow(): boolean
```

Gets whether the selection was triggered by arrow key navigation.

### pressedCtrl

```ts
get pressedCtrl(): boolean
```

Gets whether Ctrl is currently pressed.

### pressedShift

```ts
get pressedShift(): boolean
```

Gets whether Shift is currently pressed.

### selected

```ts
get selected(): TreeViewItem[]
```

Gets all of the currently selected TreeViewItems.

## Methods

### _applyFilter

```ts
protected _applyFilter(filter: string): void
```

Searches the treeview.

**Parameters**

- `filter` (`string`): The search filter.

### _clearFilter

```ts
protected _clearFilter(): void
```

Clears search filter.

### _findLastVisibleChildTreeItem

```ts
protected _findLastVisibleChildTreeItem(currentItem: TreeViewItem): TreeViewItem
```

Finds the last visible child tree item of the specified tree item.

**Parameters**

- `currentItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The current item.

**Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md): The last child item.

### _findNextVisibleTreeItem

```ts
protected _findNextVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem
```

Finds the next tree item that is not currently hidden.

**Parameters**

- `currentItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The current tree item.

**Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md): The next visible tree item.

### _findPreviousVisibleTreeItem

```ts
protected _findPreviousVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem
```

Finds the previous visible tree item of the specified tree item.

**Parameters**

- `currentItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The current tree item.

**Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md): The previous item.

### _getChildrenRange

```ts
protected _getChildrenRange(startChild: TreeViewItem, endChild: TreeViewItem): TreeViewItem[]
```

Gets the visible tree items between the specified start and end tree items.

**Parameters**

- `startChild` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The start tree item.
- `endChild` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The end tree item.

**Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)`[]`

### _getTreeOrder

```ts
protected _getTreeOrder(): Map<TreeViewItem, number>
```

Do a depth first traversal of all tree items
and assign an order to them so that we know which one
is above the other. Performance wise this means it traverses
all tree items every time however seems to be pretty fast even with 15 - 20 K entities.

**Returns** `Map<`[`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)`, number>`

### _onChildDeselected

```ts
protected _onChildDeselected(item: TreeViewItem): void
```

Called when a child tree view item is deselected.

**Parameters**

- `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item.

### _onChildRename

```ts
protected _onChildRename(item: TreeViewItem, newName: string): void
```

Called when a child tree view item is renamed.

**Parameters**

- `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item.
- `newName` (`string`): The new name.

### _onChildSelected

```ts
protected _onChildSelected(item: TreeViewItem): void
```

Called when a child tree view item is selected.

**Parameters**

- `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item.

### _openHierarchy

```ts
protected _openHierarchy(endItem: TreeViewItem): void
```

Opens all the parents of the specified item.

**Parameters**

- `endItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The end tree view item.

### _selectSingleItem

```ts
protected _selectSingleItem(item: TreeViewItem): void
```

Selects a tree view item.

**Parameters**

- `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item.

### _traverseDepthFirst

```ts
protected _traverseDepthFirst(fn: (item: TreeViewItem) => void): void
```

Call specified function on every child TreeViewItem by traversing the hierarchy depth first.

**Parameters**

- `fn` (`(item: TreeViewItem) => void`): The function to call. The function takes the TreeViewItem as an argument.

### clearTreeItems

```ts
clearTreeItems(): void
```

Removes all child tree view items.

### collapseAll

```ts
collapseAll(): void
```

Collapses all tree view items.

### deselect

```ts
deselect(): void
```

Deselects all selected tree view items.

### expandAll

```ts
expandAll(): void
```

Expands all tree view items.

### showDragHandle

```ts
showDragHandle(treeItem: TreeViewItem): void
```

Show the drag handle on the given tree item.

**Parameters**

- `treeItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree item.

### traverse

```ts
traverse(fn: (item: TreeViewItem) => void): void
```

Traverses all child [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s using depth first search and calls the supplied
function for each item.

**Parameters**

- `fn` (`(item: TreeViewItem) => void`): The function to call. The function takes the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) as an argument.

**Example**

```ts
treeView.traverse((item: TreeViewItem) => {
    console.log(item.text);
});
```

## Events

### EVENT_DESELECT

```ts
static readonly EVENT_DESELECT: "deselect" = 'deselect'
```

Fired when user deselects a TreeViewItem.

**Example**

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

### EVENT_DRAGEND

```ts
static readonly EVENT_DRAGEND: "dragend" = 'dragend'
```

Fired when user stops dragging selected TreeViewItems.

**Example**

```ts
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');
});
```

### EVENT_DRAGSTART

```ts
static readonly EVENT_DRAGSTART: "dragstart" = 'dragstart'
```

Fired when user starts dragging selected TreeViewItems.

**Example**

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

### EVENT_RENAME

```ts
static readonly EVENT_RENAME: "rename" = 'rename'
```

Fired when user renames a TreeViewItem.

**Example**

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

### EVENT_REPARENT

```ts
static readonly EVENT_REPARENT: "reparent" = 'reparent'
```

Fired when user reparents TreeViewItems.

**Example**

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

### EVENT_SELECT

```ts
static readonly EVENT_SELECT: "select" = 'select'
```

Fired when user selects a TreeViewItem.

**Example**

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

## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md)

- `get alignItems(): string` · `set alignItems(value: string)`
- `get alignSelf(): string` · `set alignSelf(value: string)`
- `get binding(): BindingBase` · `set binding(value: BindingBase)`
- `get class(): DOMTokenList`
- `get dom(): HTMLElement`
- `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get error(): boolean` · `set error(value: boolean)`
- `get flex(): boolean` · `set flex(value: boolean)`
- `get flexBasis(): string` · `set flexBasis(value: string | number)`
- `get flexDirection(): string` · `set flexDirection(value: string)`
- `get flexGrow(): string` · `set flexGrow(value: string | number)`
- `get flexShrink(): string` · `set flexShrink(value: string | number)`
- `get flexWrap(): string` · `set flexWrap(value: string)`
- `get grid(): boolean` · `set grid(value: boolean)`
- `get height(): number` · `set height(value: string | number)`
- `get hidden(): boolean` · `set hidden(value: boolean)`
- `get hiddenToRoot(): boolean`
- `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)`
- `get justifyContent(): string` · `set justifyContent(value: string)`
- `get justifySelf(): string` · `set justifySelf(value: string)`
- `get parent(): Element` · `set parent(value: Element)`
- `get readOnly(): boolean` · `set readOnly(value: boolean)`
- `get resizable(): string` · `set resizable(value: string)`
- `get resizeMax(): number` · `set resizeMax(value: number)`
- `get resizeMin(): number` · `set resizeMin(value: number)`
- `get scrollable(): boolean` · `set scrollable(value: boolean)`
- `get style(): CSSStyleDeclaration`
- `get tabIndex(): number` · `set tabIndex(value: number)`
- `get width(): number` · `set width(value: string | number)`
- `protected _buildDomNode(node: DomNode): Element`
- `append(element: Child): void`
- `appendAfter(element: Child, referenceElement: Child): void`
- `appendBefore(element: Child, referenceElement: Child): void`
- `buildDom(dom: DomNode[]): void`
- `clear(): void`
- `flash(): void`
- `forEachChild(fn: (child: Element, index: number) => false | void): void`
- `link(observers: Observer | Observer[], paths: string | string[]): void`
- `move(element: Element, index: number): void`
- `prepend(element: Child): void`
- `remove(element: Element): void`
- `resize(x?: number, y?: number): void`
- `unlink(): void`
- `static create<Type extends Element>(type: string, args: ElementArgs): Type`
- `static register<Type extends Element>(type: string, cls: Object, defaultArguments?: object): void`
- `static unregister(type: string): void`
- `static readonly EVENT_APPEND: "append" = 'append'`
- `static readonly EVENT_CLICK: "click" = 'click'`
- `static readonly EVENT_DESTROY: "destroy" = 'destroy'`
- `static readonly EVENT_DISABLE: "disable" = 'disable'`
- `static readonly EVENT_ENABLE: "enable" = 'enable'`
- `static readonly EVENT_HIDE: "hide" = 'hide'`
- `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'`
- `static readonly EVENT_HOVER: "hover" = 'hover'`
- `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'`
- `static readonly EVENT_PARENT: "parent" = 'parent'`
- `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'`
- `static readonly EVENT_REMOVE: "remove" = 'remove'`
- `static readonly EVENT_RESIZE: "resize" = 'resize'`
- `static readonly EVENT_SCROLL: "scroll" = 'scroll'`
- `static readonly EVENT_SHOW: "show" = 'show'`
- `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'`