{/* Do not edit this file. It is automatically generated by API Documenter. */}


## TreeView

TreeView class, a child class of [GridBase](/refs/Class/GridBase).

**Signature:**

```typescript
export declare class TreeView extends GridBase 
```
**Extends :** [GridBase](/refs/Class/GridBase)

## Remarks

\[Parent Class\]

[GridBase](/refs/Class/GridBase)

## Events

| Property | Type | Description |
| --- | --- | --- |
| [onTreeItemChanged](/refs/Class/TreeView#ontreeitemchanged) | (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void | A callback notifying that the value of the TreeView has changed |
| [onTreeItemCollapsed](/refs/Class/TreeView#ontreeitemcollapsed) | (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void | Callback notifying that the TreeView's item node is closed |
| [onTreeItemCollapsing](/refs/Class/TreeView#ontreeitemcollapsing) | (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void | A callback that determines the collapse of the TreeView's item nodes |
| [onTreeItemExpanded](/refs/Class/TreeView#ontreeitemexpanded) | (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void | A callback notifying that the TreeView's item node has been expanded |
| [onTreeItemExpanding](/refs/Class/TreeView#ontreeitemexpanding) | (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; boolean | A callback that determines the expansion of item nodes in the TreeView |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [treeOptions](/refs/Class/TreeView#treeoptions) | [TreeOptions](/refs/Interface/TreeOptions) | Setting model unique to TreeView |

## Methods

| Method | Type | Description |
| --- | --- | --- |
| [checkChildren(itemIndex, checked, recursive, visibleOnly, checkableOnly, checkEvent)](/refs/Class/TreeView#checkchildren) | checkChildren(itemIndex: number, checked: boolean, recursive: boolean, visibleOnly: boolean, checkableOnly: boolean, checkEvent?: boolean): void; | Checks or unchecks the child rows of the input row. |
| [collapse(itemIndex, recursive)](/refs/Class/TreeView#collapse) | collapse(itemIndex: number, recursive?: boolean): void; | Collapse the row. |
| [collapseAll()](/refs/Class/TreeView#collapseall) | collapseAll(): void; | Collapse all rows. |
| [collapseModel(model, recursive)](/refs/Class/TreeView#collapsemodel) | collapseModel(model: [GridItem](/refs/Interface/GridItem){/* */}, recursive: boolean): void; | Collapse an item (row). |
| [expand(itemIndex, recursive, force, level)](/refs/Class/TreeView#expand) | expand(itemIndex: number, recursive?: boolean, force?: boolean, level?: number): void; | Expand the row. |
| [expandAll(level, renewHasChildren)](/refs/Class/TreeView#expandall) | expandAll(level?: number, renewHasChildren?: boolean): void; | Expand all rows. |
| [expandModel(model, recursive, force, level)](/refs/Class/TreeView#expandmodel) | expandModel(model: [GridItem](/refs/Interface/GridItem){/* */}, recursive?: boolean, force?: boolean, level?: number): void; | Expand the item (row). |
| [getAncestors(itemIndex, includeRoot)](/refs/Class/TreeView#getancestors) | getAncestors(itemIndex: number, includeRoot?: boolean): number\[\]; | Returns the indices of ancestor rows. |
| [getCheckedItems()](/refs/Class/TreeView#getcheckeditems) | getCheckedItems(): number\[\]; | Returns the index list of checked items as an array. |
| [getCheckedRows(visibleOnly)](/refs/Class/TreeView#getcheckedrows) | getCheckedRows(visibleOnly: boolean): number\[\]; | Returns a list of indices of checked data rows. |
| [getChildren(itemIndex)](/refs/Class/TreeView#getchildren) | getChildren(itemIndex: number): number\[\]; | Returns the indices of child rows. |
| [getDataSource()](/refs/Class/TreeView#getdatasource) | getDataSource(): [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider){/* */}; | Returns the DataProvider connected to the tree. |
| [getDescendants(itemIndex)](/refs/Class/TreeView#getdescendants) | getDescendants(itemIndex: number): number\[\]; | Returns the indices of child rows. |
| [getParent(itemIndex)](/refs/Class/TreeView#getparent) | getParent(itemIndex: number): number; | Returns the index of the parent row. |
| [getTreeOptions()](/refs/Class/TreeView#gettreeoptions) | getTreeOptions(): [TreeOptions](/refs/Interface/TreeOptions){/* */}; | Retrieves related setting information, such as tree grid selection display. |
| [setOptions(options)](/refs/Class/TreeView#setoptions) | setOptions(options: [TreeViewOptions](/refs/Interface/TreeViewOptions){/* */}): void; |  |
| [setTreeOptions(options)](/refs/Class/TreeView#settreeoptions) | setTreeOptions(options: [TreeOptions](/refs/Interface/TreeOptions){/* */}): void; | Make settings related to tree view display and operation. |

## Events Desc
### onTreeItemChanged

A callback notifying that the value of the TreeView has changed

`Type` - (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void

**Remarks:**

Occurs at [commit()](/refs/Class/GridBase#commit) after the value has been changed.

\[Parameter list\]

`tree` - TreeView control

`itemIndex` - Index of the row whose value changed

`rowId` - Unique number of the row whose value was changed

**Example:**


```js
treeView.onTreeItemChanged = function (tree, itemIndex, rowId) {
 console.log("TreeItem item changed:: " + itemIndex);
};
```

<hr/>

### onTreeItemCollapsed

A callback notifying that the TreeView's item node has been depleted.

`Type` - (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void

**Remarks:**

\[Parameter list\]

`tree` - TreeView control

`itemIndex` - Index of the collapsed item row

`rowId` - Unique number of the collapsed row

**Example:**


```js
treeView.onTreeItemCollapsed = function (tree, itemIndex, rowId) {
 console.log('Collapsed at: ' + itemIndex);
};
```

<hr/>

### onTreeItemCollapse

A callback that determines the collapse of item nodes in the TreeView.

`Type` - (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void

**Remarks:**

\[Parameter list\]

`tree` - TreeView control

`itemIndex` - Index of the row you want to collapse

`rowId` - Unique number of the row you want to collapse

\[Return value\] - If `false`{/* */} is returned, it will not be expanded.

**Example:**


```js
treeView.onTreeItemCollapsing = function (tree, itemIndex, rowId) {
 return false;
};
```

<hr/>

### onTreeItemExpanded

Callback notifying that the TreeView's item node has been expanded

`Type` - (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; void

**Remarks:**

\[Parameter list\]

`tree` - TreeView control

`itemIndex` - index of expanded row

`rowId` - Unique number of the expanded row

**Example:**


```js
treeView.onTreeItemExpanded = function (tree, itemIndex, rowId) {
 console.log('Expanded at: ' + itemIndex);
};
```

<hr/>

### onTreeItemExpanding

A callback that determines the expansion of item nodes in the TreeView.

`Type` - (tree: [TreeView](/refs/Class/TreeView){/* */}, itemIndex: number, rowId: number) =&gt; boolean

**Remarks:**

\[Parameter list\]

`tree` - TreeView control

`itemIndex` - Index of the row to expand

`rowId` - Unique number of the row to be expanded

\[Return value\] - If `false`{/* */} is returned, it will not be expanded.

**Example:**


```js
treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
 return false;
};
```

<hr/>

## Properties Desc

### treeOptions

Setting model unique to TreeView

`Type` - [TreeOptions](/refs/Interface/TreeOptions)

**Remarks:**

[TreeOptions](/refs/Interface/TreeOptions) Returns an object. You can get or set the properties of TreeOptions.

**Example:**


```js
treeView.treeOptions.iconWidth = 20;
```

<hr/>
## Method Desc

### checkChildren

Checks or unchecks the child rows of the input row.

**\[Parameter List\]**

`itemIndex` - number

ItemModel index of parent row

`checked` - boolean

`true`{/* */}: checked, `false`{/* */}: off

`recursive` - boolean

Default: `false`{/* */}, whether to expand descendant groups included in the group.

`visibleOnly` - boolean

If `true`{/* */}, rows that collapse or are not visible during paging are excluded.

`checkableOnly` - boolean

If `true`{/* */}, only checkable items are checked.

`checkEvent` - boolean

Default: `true`{/* */}, whether [onItemChecked()](/refs/Class/GridBase#onitemchecked) occurs.

**\[Return Value\] -** void

**Example:**


```js
treeView.checkChildren(4, true, true, true, true);
```

<hr/>

### collapse

Collapse the row.

**\[Parameter List\]**

`itemIndex` - number

Index of the row you want to collapse

`recursive` - boolean

Default: `false`{/* */}, whether or not descendant groups included in the group are collapsed.

**\[Return Value\] -** void

**Example:**


```js
tree.collapse(3);
```

<hr/>

### collapseAll

Collapse all rows.

**Example:**


```js
tree.collapseAll();
```

<hr/>

### collapseModel

Collapse an item (row).

**\[Parameter List\]**

`model` - [GridItem](/refs/Interface/GridItem)

The item model you want to collapse

`recursive` - boolean

Default: `false`{/* */}, whether or not descendant groups included in the group are collapsed.

**\[Return Value\] -** void

**Example:**


```js
let model = tree.getModel(4);
tree.collapseModel(model);
```

<hr/>

### expand

Expand the row.

**\[Parameter List\]**

`itemIndex` - number

Index of the row you want to expand

`recursive` - boolean

Default: `false`{/* */}, whether to expand descendant groups included in the group.

`force` - boolean

Default value: `false`{/* */}, whether to expand descendants when recursive is `true`{/* */} even if they are already expanded.

`level` - number

Default: `0`{/* */}, when `0`{/* */} and recursive is `true`{/* */}, expand all descendants.

**\[Return Value\] -** void

**Remarks:**

When recursive is true, if you specify a level, it expands to that level.

**Example:**


```js
tree.expand(3);
```

<hr/>

### expandAll

Expands all rows.

**\[Parameter List\]**

`level` - number

Default: `0`{/* */}, when `0`{/* */} and recursive is `true`{/* */}, expand all descendants.

**\[Return Value\] -** void

**Remarks:**

When recursive is true, if you specify a level, it expands to that level.

**Example:**


```js
tree.expandAll();
```

<hr/>

### expandModel

Expand the item (row).

**\[Parameter List\]**

`model` - [GridItem](/refs/Interface/GridItem)

Model of the item you want to expand

`recursive` - boolean

Default: `false`{/* */}, whether to expand descendant groups included in the group.

`force` - boolean

Default: `false`{/* */}, whether to expand descendants when recursive is `true`{/* */} even if already expanded

`level` - number

Default: `0`{/* */}, when `0`{/* */} and recursive is `true`{/* */}, expand all descendants.

**\[Return Value\] -** void

**Remarks:**

When recursive is true, if you specify a level, it expands to that level.

**Example:**


```js
let model = tree.getModel(4);
tree.expandModel(model);
```

<hr/>

### getAncestors

Returns the indices of ancestor rows.

**\[Parameter List\]**

`itemIndex` - number

the index of that row

`includeRoot` - boolean

Default value: `true`{/* */}, `true`{/* */}: Returns the result value including the index of the hidden top root row.

**\[return value\] -** number\[\]

**Example:**


```js
let aIndexes = tree.getAncestors(3);
```

<hr/>

### getCheckedItems

Returns the index list of checked items as an array.

**Example:**


```js
let checkedItems = treeView.getCheckedItems();
```

<hr/>

### getCheckedRows

Returns a list of indices of checked data rows.

**\[Parameter List\]**

`visibleOnly` - boolean

Default value: `false`{/* */}, if entered as `true`{/* */}, rows that collapse or are not visible during paging are excluded.

**\[return value\] -** number\[\]

**Example:**


```js
let checkedRows = treeView.getCheckedRows(true);
```

<hr/>

### getChildren

index of child rowsreturns the string.

**\[Parameter List\]**

`itemIndex` - number

index of parent row

**\[return value\] -** number\[\]

**Example:**


```js
let cIndexes = tree.getChildren(3);
```

<hr/>

### getDataSource

Returns the DataProvider connected to the tree.

**Example:**


```js
let ds = treeView.getDataSource();
```

<hr/>

### getDescendants

Returns the indices of child rows.

**\[Parameter List\]**

`itemIndex` - number

index of ancestor row

**\[return value\] -** number\[\]

**Example:**


```js
let dIndexes = gridView.getDescendants(3);
```

<hr/>

### getParent

Returns the index of the parent row.

**\[Parameter List\]**

`itemIndex` - number

index of child row

**\[return value\] -** number

**Example:**


```js
let pIndex = tree.getParent(3);
```

<hr/>

### getTreeOptions

Retrieves related setting information, such as tree grid selection display.

**Example:**


```js
let treeOpts = tree.getTreeOptions();
treeOpts.lineVisible = false;
tree.setTreeOptions(treeOpts);
```

<hr/>

### setOptions

<hr/>

### setTreeOptions

Make settings related to tree view display and operation.

**\[Parameter List\]**

`options` - [TreeOptions](/refs/Interface/TreeOptions)

[TreeOptions](/refs/Interface/TreeOptions) An object with the same content as the configuration model. You only need to change the properties you want to change.

**\[Return Value\] -** void

**Remarks:**

Use [TreeOptions](/refs/Interface/TreeOptions) by specifying only the desired properties.

**Example:**


```js
tree.setTreeOptions({lineVisible: false});
```

<hr/>