GridLayout Headers

Vaadin 6 / 7 / 8
1

Hi,
My question is about achieving the ‘Fixed-Table-Header’ effect using GridLayout.

Because I couldn’t find any other way to do it, I have two GridLayouts - the top one is the ‘header’ and the bottom one is the ‘data’. They both have the same number of columns.
I wrap the bottom ‘data’ grid in a Panel, and everything works great - the bottom grid scrolls, leaving the top header intact.

Here’s where it gets interesting - if a user clicks on an item in the data grid, it expands to show some editable stuff (text areas, checkboxes etc.). This works fine as long as I stay clear of animating widgets like Depot etc. (I do really like Depot btw, it just doesn’t play well with GridLayout).

The trouble is how to tell the header GridLayout to also expand its column(s) to the same width as the data grid, and do it on the server side.
With a client-side widget, I suppose they could be linked to get the widths and sync up that way, but I haven’t got any of that.

I can and have setup listeners etc between the two, but the server doesn’t know what the widths are at the time of an item click, that’s of course done on the client when it renders the page. Maybe if the server was notified when it finished rendering the ‘data’ Grid, I could catch that and update the header (i.e. a 2-pass render…sounds messy).

Does anyone know of a way/add-on/technique to link gridlayouts or to achieve the effect of a fixed Table header using gridlayout?

Many thanks,
Peter

2

Hello,

Just to answer my own question…as I there’s bound to be others out there trying to get the same effect, I have found a workaround:

I setup an event listener between the two GridLayouts (in my case, they’re wrapped in their own classes with a Transfer pattern between them).
When an item is clicked, an event is fired with column/expanded/collapsed info, which the header grid receives.
The listener impl then removes/adds a "collapsed’ style and an “expanded” style, which allows the client to render the header column at the same width.

The main caveat to this approch is that this only works with fixed width columns (i.e. the expansion width can set in a stylesheet). In my case, the expanded editor bit is fixed width so it’s ok, but for variable width expansions, this won’t work.

Hopefully this is useful for others trying to get that nice fixed table header effect with Grids.

Of course if someone has a better approach to achieve the effect, please chime in!

Thanks,
Peter