Tree Grid Recipes

Examples that combine Tree Grid features to solve common use cases.

Highlighting a Subtree Flow
Selecting Children Recursively Flow

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

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.

Open in a
new tab

Source code

TreeGridSubtreeHighlight.javapackage com.vaadin.demo.component.treegrid;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.treegrid.TreeGrid;
import com.vaadin.flow.data.provider.hierarchy.HierarchicalDataProvider.HierarchyFormat;
import com.vaadin.flow.data.provider.hierarchy.TreeData;
import com.vaadin.flow.data.provider.hierarchy.TreeDataProvider;
import com.vaadin.flow.router.Route;

@Route("tree-grid-subtree-highlight")
public class TreeGridSubtreeHighlight extends Div {

    private final TreeGrid<Person> treeGrid = new TreeGrid<>();
    private final TreeData<Person> treeData = new TreeData<>();

    public TreeGridSubtreeHighlight() {
        treeData.addItems(DataService.getManagers(),
                manager -> DataService.getPeople(manager.getId()));
        treeGrid.setDataProvider(
                new TreeDataProvider<>(treeData, HierarchyFormat.FLATTENED));
        treeGrid.addHierarchyColumn(Person::getFullName).setHeader("Full name");
        treeGrid.addColumn(Person::getProfession).setHeader("Profession");

        // tag::snippet[]
        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());
        });
        // end::snippet[]

        treeGrid.expand(DataService.getManagers().get(0));
        add(treeGrid);
    }

    // tag::snippet[]
    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);
        }
    }
    // end::snippet[]

}
tree-grid-subtree-highlight.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);
}
tree-grid-subtree-highlight.css

See Dynamically Styling Rows & Columns for more information about custom part names.

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.