I wanted to let user to quickly choose an item from a tree so I wrote
var tg = new TreeGrid<String>();
var td = new TreeData<String>();
td.addRootItems("Lorem", "Foo");
td.addItem("Lorem", "Ipsum");
td.addItem("Foo", "Bar");
tg.setTreeData(td);
tg.addHierarchyColumn(s -> s);
tg.setSelectionMode(SelectionMode.SINGLE);
tg.asSingleSelect().addValueChangeListener(this::doStuff);
where doStuff would immediately hide the TreeGrid and process the selected item.
This is confusing, because leaf nodes are selectable by clicking on the text in hierarchy column. Other nodes are not.
Some ideas, I had but nothing that seems to me like a perfect solution:
- Add a button column or a dummy column that says “Select” (might look weird, too much repeat)
- Add a column that says “Select” but visible only on hovered row (never visible on touch screens)
- Make expanded parent nodes selectable by clicking on hierarchy column and not collapsed ones (might be still confusing)
- Put empty string to hierarchy column and add names to another (spoils indentation)
- Make all nodes selectable when expanding or collapsing and add an OK button (But I wanted to choose quickly. Some users will only have root items)
- Use addComponentHierarchyColumn instead and use a Button instead of selectable grid. Using a tertiary ButtonVariant seems to fit here nicely. (Lose ability to select by clicking somewhere else on the row. Expand/collapse sign still hilights when hovering over button.)
What would you do?
