0 Replies Latest reply on Jul 7, 2009 9:16 AM by chun shin

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

    chun shin Newbie

      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,