How to add css for a tree

Vaadin 6 / 7 / 8 Framework UI
1

Hi

I want to include checkbox at each node of an tree. One idea is to style in css so that there is checkbox at each node.
But am really stuck how to do it.
Can anyone please help me with sample code. It really helps me a lot

Tree.ItemStyleGenerator itemStyleGenerator = new Tree.ItemStyleGenerator() {
public String getStyle(Object itemId) {
// Chapter title items do not contain a period
if (!((String)itemId).contains(“.”))
return “chaptertitle”;
return null;

      }
  };
  tree.setItemStyleGenerator(itemStyleGenerator);

Am getting error in this line if (!((String)itemId).contains(“.”))

Have added these lines of code in TreeMultiSelectExample.java file which is taken from samples->Tree

My css looks like this
.v-tree-node v-tree-node-chaptertitle {
background: url(“…/sampler/icons/Success.png”);
padding-left: 30px;
}

can anyone please let me know where am going wrong

Thanks a lot

2

The [tt]
v-tree-node-chaptertitle
[/tt] in your rule is missing period (.). In addition, your CSS rule uses descendant matching, but the [tt]
.v-tree-node
[/tt] and [tt]
v-tree-node-chaptertitle
[/tt] are in the same element. However, the former name is redundant and only the [tt]
v-tree-node-chaptertitle
[/tt] is needed.

There’s also an issue that click events are caused only by clicking a [tt]
span
[/tt] element inside the tree node element, so setting an indentation (with padding) for the tree node element has a side effect that clicks on the actual check box do not cause click events. So, you have to set the style trickery for the [tt]
span
[/tt] element.

.v-tree-checkboxed .v-tree-node-caption-unchecked div span {
    background: url("icons/user.png") no-repeat;
    padding-left: 24px;
}

.v-tree-checkboxed .v-tree-node-caption-checked div span {
    background: url("img/smiley2-20px.png") no-repeat;
    padding-left: 24px;
}

See an
on-line example
.