Vaadin 8.1 Tree as menu part: set CSS class for node(s)

Hi there,

I’m new to Vaadin 8 and I have quiet a complex menu structure with mutiple levels, so I used the Tree component as part of the navigation.
Click navigation works perfect so far.

I have now two questions:

  1. I want to set a special CSS class for the current (page) item in the tree. Is this somehow possible without rerendering the whole tree every time?
    I could set a <span id… around my caption in HTML mode, but how could I iterate through the HTML elements?

  2. Bonus: What would be the easiest solution to get the tree item object only by a certain property?
    e.g.: given is ProjectFolder::getId and I want to get the ProjectFolder out of TreeData to expand it in the tree

Best regards,

I created now a workaround which solved my issues:

The first thing I do is: set a unique style class name per tree item with
e.g. tree item 1 has class=“tree-item-1”, tree item 2 has class=“tree-item-2”, …
This is needed for 1).

The second this is: I keep my object list (which is used in the tree) and every time I need to update loop through the objects.

for (Object object : objectList) {
if (object.getProperty() == “whatever”) {
// for 1)
String jQueryCommandAddClass = “$('.”.object.getIdClass().“').addClass(‘class-to-add’);”;

    // e.g. for 2)
} else {
    // for 1)
    String jQueryCommandRemoveClass = "$('.".object.getIdClass()."').removeClass('class-to-remove');";

[/code]1) Basically if I need to add/remove a CSS class, I can do it via jQuery (or plain Javascript) with the unique class name as selector.

  1. In this loop I also have the needed object for certain property value checks.

If anybody has a better solution feel free to comment.

Best regards,

P.S.: jQuery can be loaded via this annotation:
With e.g. /src/main/webapp/VAADIN/js/jquery-3.2.1.min.js