Vaadin WC API reference

GridTreeToggle

View as MD

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: 

<vaadin-grid-column id="column"></vaadin-grid-column>
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 on the <vaadin-grid-tree-toggle> element:

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

Fired when the expanded property changes.

Types

GridTreeToggleExpandedChangedEvent 

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