Vaadin 7.1 ItemStyleGenerator - vaadin

Question

I have a problem formatting toplevel-nodes in a Vaadin-Tree. I understand using the ItemStyleGenerator to set ccs-Style for particular nodes. I did this with following code:
this.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
#Override
public String getStyle(Tree source, Object itemId) {
if (source.isRoot(itemId)) {
return "toplevel";
} else {
return null;
}
}
});
The CSS is as follows:
.v-tree-node-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
And the result is, that the root-node and all its child nodes have the same background-color and the border is around the toplevel- and all its child-nodes and the node icon is missing
My goal is to format just the root-node.
When i set the toplevel-style to a child node it is formatted as expected.
Can somebody help? Thanks.
Bernhard

Answer 1

Change your CSS to this:
.v-tree-node-caption-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
If you only want to style behind the text, and not the whole width of the tree, use this:
.v-tree-node-caption-toplevel span {
CSS stuff...
}
(The text part of the caption is contained within a span inside the v-tree-node-caption element.)
Here's a (not very detailed) explanation of what's occurring:
An expanded node inside a Vaadin tree (with children) is actually made up of about 3 distinct divs. First you have the container div, which is v-tree-node. Then you have the v-tree-node-caption which is an inner div that contains the name and icon of the node, this is probably what you want to style. Last, there is v-tree-node-children which contains all the child nodes underneath. The ItemStyleGenerator not only applies your style to the v-tree-node, but the v-tree-node-caption and v-tree-node-children as well.
This is basically how your HTML will look when you apply the toplevel style to an item:
<div class="v-tree-node v-tree-node-toplevel">
<div class="v-tree-node-caption v-tree-node-caption-toplevel">
node1, the best node!
</div> //end of caption
<div class="v-tree-node-children v-tree-node-children-toplevel">
...
Other divs (child nodes)
...
</div> //end of children
</div> // end of node
You were losing the arrow icon because it's the background image of the v-tree-node. Each v-tree-node (where canHaveChildren() == true) has a background style (transparent, with the arrow image).
.v-tree-node {
url("../reindeer/tree/img/arrows.png") no-repeat scroll 6px -10px transparent;
}
If you override the background style on a v-tree-node, you will lose the image (the arrow). What you could do instead is to use the background-color style to only override the transparent part, but as I pointed out earlier, the v-tree-node element contains both the caption and children elements, so your background color will be visible behind any child nodes (and slightly to the left, even if you style the background-color of the child node).