TreeTable Icon

Rajeev Khanna

I am tryng to customize the TreeTable expand/collapse icon to my own icon. Instead of the right and bottow arrows, I would like to use the + and - icons. I have defined a style in my app CSS as follows

.my-tree-table .v-treetable-node-open
{
   background: transparent url(icons/icon_MinusSmall.png) no-repeat;
}

In my code I apply the style as follows

summaryTable.setStyleName("my-tree-table");

My icon is added but the default icon is also visible. See attached.
Vaadin version is 7.4.4
What am I doing wrong.
Thanks,

Capture.PNG (456 B)

Marko Grönroos

Note that at least Valo uses font icons (from the FontAwesome font) for the tree icons. Therefore, the easiest way would be to use font icon, which you set with a rule such as

.v-treetable-node-open::before {
    content: "+";
}

.v-treetable-node-closed::before {
    content: "-";
}

Well, the Valo uses an animation to rotate the icon, so you'd perhaps want to disable that animation. Or not.

You'd maybe also want to use some other font-family than FontAwesome for that.

Rajeev Khanna

Thanks. It worked.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

TreeTable Icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.