TreeGrid : Possible to limit expand/collapse to click on icon only?

Flow
1

Is it possible somehow to limit the trigger to expand/collapse to the expand/collapse icon?
By default, expand/collapse also occurs when single clicking a row in the tree grid.

2

I don’t think so; you should file an enhancement request at https://github.com/vaadin/vaadin-grid-flow/issues

3

As a workaround, you can use a ComponentHierarchyColumn:

 grid.addComponentHierarchyColumn(o -> {
            Checkbox checkbox = new Checkbox();
            checkbox.setIndeterminate(true);

            HorizontalLayout horizontalLayout = new HorizontalLayout(checkbox, new Span(o.getFilename()));
            // avoid the open/close node when click on the checkbox
            horizontalLayout.getElement().addEventListener("click", e -> {}).addEventData("event.stopPropagation()");
            return horizontalLayout;
        }).setHeader("File Name");

And disable the propagation of the click:
horizontalLayout.getElement().addEventListener("click", e -> {}).addEventData("event.stopPropagation()");

It’s a bit slower than a text (since it’s a component),

4

You can also extend the TreeGrid with this:

public class NoClickTreeGrid<T> extends TreeGrid<T> {

    @Override
    public Column<T> addHierarchyColumn(ValueProvider<T, ?> valueProvider) {
        Column<T> column = addColumn(TemplateRenderer
            .<T> of("<vaadin-grid-tree-toggle "
                + "leaf='[[item.leaf]
]' expanded='{{expanded}}' level='[[level]
]'><span onclick=\"event.stopPropagation();\">[[item.name]
]</span>"
                + "</vaadin-grid-tree-toggle>")
            .withProperty("leaf",
                item -> !getDataCommunicator().hasChildren(item))
            .withProperty("name",
                value -> String.valueOf(valueProvider.apply(value))));
        final SerializableComparator<T> comparator =
            (a, b) -> compareMaybeComparables(valueProvider.apply(a),
                valueProvider.apply(b));
        column.setComparator(comparator);

        return column;
    }
}

If you need only text.

EDIT: But I think my workaround is blocking the click at the same time. So you probably need to trigger this manually.

5

In fact for a text, this workaround should be fine :slight_smile:


public class NoClickTreeGrid<T> extends TreeGrid<T> {

    @Override
    public Column<T> addHierarchyColumn(ValueProvider<T, ?> valueProvider) {
        Column<T> column = addColumn(TemplateRenderer
            .<T> of("<vaadin-grid-tree-toggle "
                + "leaf='[[item.leaf]
]' expanded='{{expanded}}' level='[[level]
]'>"
                + "</vaadin-grid-tree-toggle>[[item.name]
]")
            .withProperty("leaf",
                item -> !getDataCommunicator().hasChildren(item))
            .withProperty("name",
                value -> String.valueOf(valueProvider.apply(value))));
        final SerializableComparator<T> comparator =
            (a, b) -> compareMaybeComparables(valueProvider.apply(a),
                valueProvider.apply(b));
        column.setComparator(comparator);

        return column;
    }
}