Select with nested items.

Hi All,

I have a flow project where I need a Select with nested items. I looked at MenuBar and also at a Button/Context Menu (or TextField/ContextMenu) combination.

The latter seems to be doable, but with some work needed to get the button or textfield to look and behave like the select.

Has anybody else tried this with success?

Thanks in advance
Martin

Hi Martin

I haven’t done anything similar yet, but here’s what I would try:
1: flatten the item list so it contains all the items directly (both direct items and their nested items in a single collection)
2: add a new class name to the rendered components which are nested items
3: with CSS, apply indentation to the options marked as nested items.

// 1
List<Person> myFamily = getDirectFamily();
Map<Person, Boolean> flatFamilyMap = new HashMap<>();
for (Person familyMember : myFamily) {
	flatFamilyMap.put(familyMember, false); // false => is not nested person
	for (Person familyMemberChild : familyMember.getChildren()){
		flatFamilyMap.put(familyMemberChild, true); // true => is nested person
	}
}

Select<Person> select = new Select<>();
select.setItems(flatFamilyMap.keySet());
// 2
select.setRenderer(new ComponentRenderer<>(person -> {
	Span personSpan = new Span(person.getName());
	// if nested person, add class name "nested-select-item"
	if(flatFamilyMap.get(person)){
		personSpan.addClassName("nested-select-item");
	}
	return personSpan;
}));

// 3 (CSS file, maybe needs to be in :host syntax for shadow DOM)
.nested-select-item {
	padding-left: 15px;
}

Hi Kaspar,

Thanks for your suggestion, i’ll give it a try.

Cheers
Martin