hide/display rich:subTable in rich:dataTable by clicking a r

[ano1121]

Hi,

I have a rich:dataTable and rich:subTable(s) in it. My question is how to implement a feature hiding/displaying rich:subTable(s) efficiently. The trigger to hide/display rich:subTable rows is clicking a row above any rich:subTable.

Here is how the current rich:dataTable looks like.

<h:form id="frm">
 <a4j:outputPanel id="outerTableDiv">

 <rich:dataTable id="outer1" value="#{myTestBean.totalRecords.records}"
 var="data" rowKeyVar="tableRowIndex">

 <a4j:support event="onRowClick" onsubmit="rowClicked(this)"
 action="#{myTestBean.toggleSubTableRow(data)}" reRender="frm:outerTableDiv" />

 <f:facet name="header">
 <rich:columnGroup>
 <rich:column rowspan="2">
 <rich:spacer />
 </rich:column>
 <rich:column rowspan="2">
 <h:outputText value="item" />
 </rich:column>
 <rich:column rowspan="2">
 <h:outputText value="name" />
 </rich:column>
 <rich:column rowspan="2">
 <h:outputText value="type" />
 </rich:column>
 <rich:column rowspan="2">
 <h:outputText value="number" />
 </rich:column>
 <rich:column colspan="2">
 <h:outputText value="Total item" />
 </rich:column>
 <rich:column breakBefore="true">
 <h:outputText value="Pending" />
 </rich:column>
 <rich:column styleClass="nonPendingCol">
 <h:outputText value="Processed" />
 </rich:column>
 </rich:columnGroup>
 </f:facet>

 <rich:columnGroup
 rendered="#{(myTestBean.allItems ? true : (myTestBean.itemSelected == data.item.number ? true : false))}">
 <rich:column>
 <h:graphicImage value="#{!data.expand ? '../images/Plus.gif' : '../images/Minus.gif'}" />
 </rich:column>

 <rich:column colspan="4">
 <h:outputText value="#{data.item.number}: " />
 <h:outputText value="#{data.item.name}" />
 </rich:column>

 <rich:column>
 <h:outputText value="#{data.totalPending}" />
 </rich:column>

 <rich:column>
 <h:outputText value="#{data.totalProcessed}" />
 </rich:column>
 </rich:columnGroup>

 <rich:subTable id="sub1" value="#{data.typeRecords}" var="subData" rowKeyVar="subTableRowIndex"
 rendered="#{data.expand and (myTestBean.allItems ? true : (myTestBean.itemSelected == data.item.number ? true : false))}">

 <rich:column colspan="2">
 <rich:spacer />
 </rich:column>

 <rich:column colspan="3">
 <h:outputText value="#{subData.type.value}: " />
 <h:outputText value="#{subData.type.description}" />
 </rich:column>

 <rich:column>
 <h:outputText value="#{subData.totalPending}" />
 </rich:column>

 <rich:column>
 <h:outputText value="#{subData.totalProcessed}" />
 </rich:column>
 </rich:subTable>
 </rich:dataTable>
</a4j:outputPanel>
</h:form>

Is there a way to rerender only the subtable from the a4j:support onRowClick event? Currently, it rerenders outerTableDiv a4j:outputPanel, but I guess it will be too expensive to rerender the whole page especially if the table has a few thousands of rows.

Any comment would be appreciated.

Thanks,