---
title: GridTreeToggle
description: GridTreeToggle
element: vaadin-grid-tree-toggle
---

## Description

`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`
that provides toggle and level display functionality for the item tree.

#### Example:
```html
<vaadin-grid-column id="column"></vaadin-grid-column>
```
```js
const column = document.querySelector('#column');
column.renderer = (root, column, model) => {
  let treeToggle = root.firstElementChild;
  if (!treeToggle) {
    treeToggle = document.createElement('vaadin-grid-tree-toggle');
    treeToggle.addEventListener('expanded-changed', () => { ... });
    root.appendChild(treeToggle);
  }
  treeToggle.leaf = !model.item.hasChildren;
  treeToggle.level = level;
  treeToggle.expanded = expanded;
  treeToggle.textContent = model.item.name;
};
```

### Styling

The following shadow DOM parts are available for styling:

Part name | Description
---|---
`toggle` | The tree toggle icon

The following state attributes are available for styling:

Attribute  | Description
-----------|-------------------------------------
`expanded` | When present, the toggle is expanded
`leaf`     | When present, the toggle is not expandable, i. e., the current item is a leaf

The following custom CSS properties are available for styling:

Custom CSS property | Description | Default
---|---|---
`--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`

## Properties

### expanded

**Type:** `boolean`

Sublevel toggle state.

### leaf

**Type:** `boolean`

Hides the toggle icon and disables toggling a tree sublevel.

### level

**Type:** `number`

Current level of the tree represented with a horizontal offset
of the toggle button.

## Events

### expanded-changed

**Type:** [GridTreeToggleExpandedChangedEvent](#gridtreetoggleexpandedchangedevent)

Fired when the `expanded` property changes.

## Types

### GridTreeToggleExpandedChangedEvent

```ts
/**
 * Fired when the `expanded` property changes.
 */
export type GridTreeToggleExpandedChangedEvent = CustomEvent<{ value: boolean }>;
```