> Markdown version of [Recipes](https://vaadin.com/docs/next/components/tree-grid/recipes). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Tree Grid Recipes

This page contains examples that combine Tree Grid features to solve common use cases.

## <a id="highlighting-a-subtree-flow"></a>Highlighting a Subtree Flow

Custom part names can depend on the position of an item in the hierarchy. In the example below, selecting a row highlights all of its descendants with a `selected-subtree` part name. The part name generator checks whether the selected item is an ancestor of the rendered item. Because part names are generated only when a row is rendered, the selection listener refreshes the descendants of both the previously and the newly selected item.

`TreeGridSubtreeHighlight.java`

```java
treeGrid.setPartNameGenerator(person -> {
        Person selected = treeGrid.asSingleSelect().getValue();
        return isDescendantOf(person, selected) ? "selected-subtree" : null;
    });

    treeGrid.asSingleSelect().addValueChangeListener(event -> {
        // Regenerate the part names of the previous and new subtree
        refreshDescendants(event.getOldValue());
        refreshDescendants(event.getValue());
    });
private boolean isDescendantOf(Person person, Person ancestor) {
    if (ancestor == null) {
        return false;
    }
    Person parent = treeData.getParent(person);
    while (parent != null) {
        if (parent.equals(ancestor)) {
            return true;
        }
        parent = treeData.getParent(parent);
    }
    return false;
}

private void refreshDescendants(Person person) {
    if (person == null) {
        return;
    }
    for (Person child : treeData.getChildren(person)) {
        treeGrid.getDataProvider().refreshItem(child);
        refreshDescendants(child);
    }
}
```

`tree-grid-subtree-highlight.css`

```css
/* Add this to your global CSS, for example in: */
/* src/main/resources/META-INF/resources/styles.css */

vaadin-grid::part(selected-subtree) {
    /* Aura */
    --vaadin-grid-cell-background-color: color-mix(in srgb, currentColor 4%, transparent);
    /* Lumo */
    --vaadin-grid-cell-background: color-mix(in srgb, currentColor 4%, transparent);
}
```

See [Dynamically Styling Rows & Columns](https://vaadin.com/docs/next/components/grid/styling.md#part-name-generator) for more information about custom part names.

## <a id="selecting-children-recursively-flow"></a>Selecting Children Recursively Flow

In multi-select mode, selecting a parent row selects only that row by default. To also select or deselect all of its descendants, handle the selection event and update the selection with the children of the changed items. The example below fetches the descendants from the data provider. Selection changes made on the server aren’t from the client, so the listener ignores them and doesn’t process its own updates.

`TreeGridRecursiveSelection.java`

```java
treeGrid.setSelectionMode(SelectionMode.MULTI);
    treeGrid.asMultiSelect().addSelectionListener(event -> {
        // Ignore the programmatic selection changes made below
        if (!event.isFromClient()) {
            return;
        }
        treeGrid.asMultiSelect().updateSelection(
                getItemsWithDescendants(event.getAddedSelection()),
                getItemsWithDescendants(event.getRemovedSelection()));
    });

private Set<Person> getItemsWithDescendants(Collection<Person> items) {
    Set<Person> result = new HashSet<>();
    for (Person item : items) {
        result.add(item);
        if (treeGrid.getDataProvider().hasChildren(item)) {
            // HierarchicalQuery takes a filter and a parent. The filter is
            // null because Tree Grid has no filter of its own, and the
            // parent is the item whose direct children to fetch.
            List<Person> children = treeGrid.getDataProvider()
                    .fetchChildren(new HierarchicalQuery<>(null, item))
                    .toList();
            result.addAll(getItemsWithDescendants(children));
        }
    }
    return result;
}
```

See [Grid Selection](https://vaadin.com/docs/next/components/grid/selection.md) for more information about selection modes.