Mark single rows of a TreeTable with a special collapse/expand icon

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I’d like to give single rows of a TreeTable a special icon that differs visually from the rest.

An example would be the red icon in the attached PNG.

Has anyone an idea how to realize this?
12361.png

2

Hey. The arrows are there with the help of images and css. If the row is open, the first cell in the row gets the style name v-treetable-node-open. Again if it is closed it will get v-treetable-node-closed. The css puts a background image to these cells which has the arrow.

What you can do is to give the alternative looking rows an extra stylename with a CellStyleGenerator, and then add to your theme rules for the alternative style. Something like .my-special-row .v-treetable-node-open { background-image: the-red-open-arrow.png }

3

Thank you very much, your suggestion works! The code looks like this:


treeTable.setCellStyleGenerator(new Table.CellStyleGenerator() {
    public String getStyle(Object itemId, Object propertyId) {
        if (hashMap.contains(itemId)) {
        	return "checkmark";
        }
        return null;
    }
});

My CSS-file includes the following:


.v-table-cell-content-checkmark .v-treetable-node-closed {
	background-image: url(img/arrow_right_red.png);
}
4

Looks good. A little detail however. You should probably do the if check like this:

if (hashMap.contains(itemId) && propertyId == null) {
  return "checkmark";
}

If I remember correctly, the method is run once for every property and additionally once for the entire row. What this means is that additionally to the entire row, you get the style name into every cell in the whole table. Probably doesn’t have any effect as your css only affects that once cell, but I could think that it produces a bit of clutter and such. You would also have to change your css first part to target the row and not the cell. Another alternative is also to check that the propertyId matches the first column in your table and only apply the name to it, but changing the column order would break this approach.

Not a big deal, just thought it was worth mentioning.

Another thing that I thought of is that IE6 is bad at rendering PNG’s with transparency in them. Check if you get a gray box around your triangles in IE6. Vaadin does some hack to support transparency in IE6, but there is no reason to go into the details about that before you’ve verified that you have that problem and that you support IE6. :slight_smile:

5

Thank you!

I changed the if-check as you wrote and my CSS looks now like this:


.v-table-row-checkmark .v-treetable-node-closed {
	background-image: url(img/arrow_right_red.png);
}

Thanks for the IE6 hints as well.

6

where i have to put this ?

treeTable.setCellStyleGenerator(new Table.CellStyleGenerator() {
public String getStyle(Object itemId, Object propertyId) {
if (hashMap.contains(itemId)) {
return “checkmark”;
}
return null;
}
});

what is hashMap? the name of my treetable ? It does not work T_T