Add image in front of Item in Tree

Hi all. How to add image in front of Item in Hierarchical Tree in Vaadin 8.2.1?

Hey Alexander,

you could just add some images to your_theme/img folder and use e.g.

tree.setItemIconGenerator(item -> new ThemeResource("img/"+item.getId()+".png");

and it will display your images in front of the captions like an icon (of course you should resize them so they are not to big).

Greeting,
Michael


Michael Rzehulka.
Great!
And how correctly change image when collapse/expand item?

Hey,

just check for

tree.isExpanded(item);

so full code for example would be

tree.setItemIconGenerator(item -> {
if(tree.isExpanded(item)) {
return new ThemeResource("img/expanded/"+item.getId()+".png");
} else {
return new ThemeResource("img/collapsed/"+item.getId()+".png");
}
});


Michael,
Thanks a lot!
And last question, maybe you know how to control css styling (after, before) when item selected. I can’t find corresponding css class.

Hey,
are you looking for

v-tree8-row-selected

?

I’v have already tried this property but nothing changed.

.v-tree8-rowmode-cell-focused::after {…}
.v-tree8-row-selected .v-tree8-rowmode-cell-focused::after {…}

I want to get rid from highlighting and bordering.