h:dataTable layout problem
Hi,
I have a problem achieving a certain layout using rich:dataTable and rich:column. Here's my template:
<rich:dataTable id="myTable" value="#{myBean.someList}" var="item" ajaxKeys="#{myBean.ajaxKeys}">
<rich:column id="col1">
<f:facet name="header">Col 1</f:facet>
<h:outputText value="#{item.attr1}"/>
</rich:column>
<rich:column id="col2">
<f:facet name="header">Col 2</f:facet>
<h:outputText value="#{item.attr2}"/>
</rich:column>
<rich:column id="col3">
<f:facet name="header">Col 3</f:facet>
<a4j:commandButton value="Expand" action="#{myBean.expand}" reRender="myTable"/>
</rich:column>
<rich:column id="col4" breakBefore="true" colspan="3" rendered="#{item.expandedFlag}">
<h:outputText value="#{item.attr3}"/>
</rich:column>
</rich:dataTable>
The layout I want to achieve is to have each item rendered on 1 row but when a user clicks on the "Expand" button that is available at the end of every row, render the clicked item on 2 rows. It kind of works but there's a couple of weird things I don't understand.
Here's a sample of the HTML that is rendered (I only included the relevant pieces of HTML):
<table class="dr-table rich-table" cellspacing="0" cellpadding="0" border="0"> <colgroup span="3"/> <thead> <tr class="dr-table-subheader rich-table-subheader"> <td class="dr-table-subheadercell rich-table-subheadercell" scope="col">Col 1</td> <td class="dr-table-subheadercell rich-table-subheadercell" scope="col">Col 2</td> <td class="dr-table-subheadercell rich-table-subheadercell" scope="col">Col 3</td> </tr> </thead> <tbody> <tr class="dr-table-firstrow rich-table-firstrow"> <td class="dr-table-cell rich-table-cell">value 1.1</td> <td class="dr-table-cell rich-table-cell">value 1.2</td> <td class="dr-table-cell rich-table-cell">The button goes here...</td> </tr> <tr class="dr-table-row rich-table-row"> <td/> </tr> <tr class="dr-table-firstrow rich-table-firstrow"> <td class="dr-table-cell rich-table-cell">value 2.1</td> <td class="dr-table-cell rich-table-cell">value 2.2</td> <td class="dr-table-cell rich-table-cell">The button goes here...</td> </tr> <tr class="dr-table-row rich-table-row"> <td/> </tr> <tr class="dr-table-firstrow rich-table-firstrow"> <td class="dr-table-cell rich-table-cell">value 3.1</td> <td class="dr-table-cell rich-table-cell">value 3.2</td> <td class="dr-table-cell rich-table-cell">The button goes here...</td> </tr> <tr class="dr-table-row rich-table-row"> <td/> </tr> </tbody> </table>
Question #1: Every odd row has a style class called "rich-table-firstrow". Shouldn't this only be on the first row of the table? If I remove "col4", every item is displayed on a single row but every "tr" tag has the "rich-table-firstrow" class.
Question #2: Every second row is simply one empty "td" tag. I know that this is due to the "rendered" attribute that I specified on my "col4", which evaluates to false until the button at the end of the row is clicked on. But when it does evaluate to false, if it detects that this column is on its own row, shouldn't it simply not render a "tr" tag at all?
I tried to play with the rich:columnGroup tag but I had the same behaviour. I think my biggest problem is the "rendered" attribute on a rich:column wich seems to mess up the layout when it evaluates to false. Does anybody have an idea how to achieve the layout that I want?
I'm using RichFaces 3.1.0 RC3.
Thanks.