0 Replies Latest reply on Jul 9, 2008 3:22 PM by Sanjeev Koppal

    DataTable and subTable expand and Collapse

    Sanjeev Koppal Newbie

      I have tried this Expand and collapse using dataTable and subtable table implementation, thought it might be useful ...
      I had posted
      http://www.jboss.com/index.html?module=bb&op=viewtopic&t=138340
      for which i couldn't get any soln...
      the below code works ... as of now :)


      <rich:dataTable id="jobList" styleClass="sResults"
       cellpadding="0" cellspacing="0" width="700" border="0" var="val" value="#{paginator.values}" rows="10">
       <rich:column style="width:20px">
       <f:facet name="header">
       <rich:spacer/>
       </f:facet>
       <a4j:commandLink action="#{paginator.expandVersion}" reRender="jobList_${val.nodeNid},jobList" ajaxSubmit="true"
       rendered="#{oesfn:jobHasVersions(paginator,val.nodeNid)}"
       oncomplete="hideImg('_img_${val.nodeNid}'),showImg('_img_1_${val.nodeNid}'),showDiv('${val.nodeNid}')" >
       <img id="_img_${val.nodeNid}" src="../images/arrow_right.gif" />
       <f:param name="expand" value="true" />
       </a4j:commandLink>
      
       <a4j:commandLink action="#{paginator.expandVersion}" reRender="jobList_${val.nodeNid},jobList" ajaxSubmit="true"
       rendered="#{oesfn:jobHasVersions(paginator,val.nodeNid)}"
       oncomplete="showImg('_img_${val.nodeNid}'),hideImg('_img_1_${val.nodeNid}'),hideDiv('${val.nodeNid}')" >
       <img id="_img_1_${val.nodeNid}"
       src="../images/arrow_down.gif" />
       <f:param name="expand" value="false" />
       </a4j:commandLink>
      </rich:column >
      <rich:column sortBy="#{val.nodeNid}" style="width:100px">
       <f:facet name="header">
       <h:outputText value="Job Code" />
       </f:facet>
       <h:commandLink value="#{val.nodeNid}" action="#{viewJobBean.viewJobDetail}">
       <f:param name="jobId" value="#{val.nodeNid}" />
       </h:commandLink>
      </rich:column>
       <rich:column sortBy="#{val.jobStatusString}" style="width:120px">
       <f:facet name="header">
       <h:outputText value="Status" />
       </f:facet>
       <img src="xyz.gif" />
       #{val.jobStatusString}
       </rich:column>
      
      <!-- NESTED TABLE -->
      <rich:subTable id="jobList_${val.nodeNid}" onRowMouseOver="this.style.backgroundColor='#F8F8F8'" styleClass="sResultsver"
       onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
       value="#{paginator.subTableList}"
       var="val2"
       rendered="${paginator.expandVersion">
      
       <rich:scrollableDataTable height="100px"
       width="900px" id="jobScrollVerList" rows="10" value="#{paginator.versions}"
       var="val1" >
      
       <rich:column style="width:100px">
       <h:commandLink
       value="#{val1.versionFrnNodeNid}" action="#{viewJobBean.viewJobDetail}">
       <f:param name="jobIdVersion"
       value="#{val1.versionFrnNodeNid}" />
       </h:commandLink>
       </rich:column>
       <rich:column style="width:120px">
       <img src="/images/icon_doc_silver.gif" />
       #{val1.versionState}
       </rich:column>
       </rich:scrollableDataTable>
       </rich:column>
      </rich:subTable>
      <!-- END NESTED TABLE -->
      
       <f:facet name="footer">
       <rich:datascroller id="ds2" ajaxSingle="false" reRender="jobList" for="jobList"
       pageIndexVar="pageIndex" pagesVar="pages" boundaryControls="show" fastControls="hide" >
       <f:facet name="pages">
       <h:outputText value="Displaying Page #{pageIndex} / of #{pages}" ></h:outputText>
       </f:facet>
       </rich:datascroller>
       </f:facet>
      </rich:dataTable>