> Markdown version of [Recipes](https://vaadin.com/docs/v25/components/tree-grid/recipes). Section index: [llms.txt](https://vaadin.com/docs/v25/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/v25/components/grid/styling.md#part-name-generator) for more information about custom part names.