GridLayout styling rows and hiding rows

We are using gridlayout at many places in our ui.

  1. We would like to stype the rows with alternate colors (say). I do not seem to find a good a way to do this. I suppose, this should be part of vaadin framework. If we style individual cell components , it will not result in desired look and feel.

  2. Hiding rows : We conditionally hide/show rows in gridlayout. Even if we hide the rows, it leaves a visible space between the rows , again resulting in bad user experience.

These functionalities are so critical that if we are not able to achieve these, we will have to get rid of vaadin and move to other frameworks.

I appreciate your help.


  1. Yes, such a feature would be usable in many cases. Unfortunately it does not exist, and it would be a bit tricky to implement since if you examine the GridLayout with e.g. FireBug you’ll notice that it does not have actual rows and columns, just absolutely placed slots for the components.

  2. Depends on how you hide/show the row. If you have spacing enabled in the layout and hide the row by just setting it’s components not visible, this will lead to double spacings on top of each other. A workable option would be to remove the components of that row and the whole row on hide, and readding on show.

  1. Back a long time ago, I published FastGrid, an alternative for GridLayout that does not have some of its features but does copy styles from components to their containing cells. That was for Vaadin 6.0/6.2, but a colleague of mine has been looking into porting it for Vaadin 7.1 so perhaps it will come if he finishes porting it.

  2. There is a ticket about this (row with only hidden components should not result in extra spacing) and a patch under review so that might also be coming soon, although we’ll need to see if it risks breaking existing applications and thus might need to go e.g. to Vaadin 7.2 rather than a bugfix release.