How to add additional rows to Tapestry Grid?

Question

I have a Grid together with its GridDataSource. However, I want to show one column of that grid under all the others.

Here's the example:

I have this so far:

| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
========================================================
| Data 11  | Data 12  | Data 13  | Data 14  | Data 15  |
--------------------------------------------------------
| Data 21  | Data 22  | Data 23  | Data 24  | Data 25  |
--------------------------------------------------------

I would like to achieve this:

| Column 1 | Column 2 | Column 3 | Column 4 |
=============================================
| Data 11  | Data 12  | Data 13  | Data 14  |
|                  Data 15                  |
---------------------------------------------
| Data 21  | Data 22  | Data 23  | Data 24  |
|                  Data 25                  |
---------------------------------------------

I was thinking of try to add a <tr> after first 4 column cells and put my DataX5 inside it, but that's got me nowhere.

Answer 1

You could use my griddecorator mixin and apply a GridRowDecorator to each row. The decorator creates a new row after the current and moves the last element to the new row.

If not, create your own mixin which tweaks the DOM once the grid has rendered. You might want to take a look at my gridcollapse mixin where I move columns and rows about and add rowspans.

Answer 2

Another, slightly dodgy, way is to use outputRaw and a custom cell to get around tapestry's properly formed XML requirements.

Eg

<t:grid source="..." value="current">
   <p:column5Cell>     
      <t:outputRaw value="&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan='4'&gt;" />
      ${current.column5}
   </p:column5Cell>
</t:grid>