DataTable and subTable expand and Collapse

[sanjeevkoppal]

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>