Simple ajax sample(richfaces-demo main data table page used originally):
<h:form> <rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" cellpadding="0" cellspacing="0" id="table" width="700" border="0" var="record" value="#{report.expReport.records}"> <f:facet name="header"> //header there </f:facet> <rich:column colspan="5"> <a4j:commandLink value="+/-" reRender="table"> <a4j:actionparam name="shown" value="#{not record.showDetails}" assignTo="#{record.showDetails}"/> </a4j:commandLink> <h:outputText value="#{record.city}" /> </rich:column> <rich:subTable rendered="#{record.showDetails}" onRowMouseOver="this.style.backgroundColor='#F8F8F8'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" var="expense" value="#{record.items}"> <rich:column> <h:outputText value="#{expense.day}"></h:outputText> <f:facet name="footer"> <rich:spacer /> </f:facet> </rich:column> //more columns there </rich:subTable> <f:facet name="footer"> //footer there </f:facet> </rich:dataTable> </h:form>
and showDetails variable added to Record object additionally.
Could be also done just at client side. In that case - need just iterate tr siblings of the row with link which has subtable classes and revert display style. But I believe ajax way more convenient as it in sync with server side state.
Comments