Expand/Collapse Subtable in Datatable

Question

Is it possible to expand/collapse a subtable in a datatable? My subtable contains info relating to the row above it and I would like to show/hide onclick of an image. Just wondering how I'd go about it?

This is what I'm currently using:

  <rich:dataTable value="#{accountsBean.musicboxes}"  var="currentMusicBox">               
                <rich:column>
                        <h:graphicImage id="expand" value="../AccountsForms/images/details_open.png" onclick="toggleNotes(this);" />
                        <rich:column><h:outputText value="#{currentMusicBox.name}" /></rich:column>
                        <rich:column><h:outputText value="#{currentMusicBox.username}" /></rich:column>
                        <rich:column><h:outputText value="#{currentMusicBox.password}" /></rich:column>
                        <rich:column><h:outputText value="#{currentMusicBox.location}" /></rich:column>
                            <rich:dataTable id="notesTable" value="#{currentMusicBox.notes}" var="currentNote" style="display: none;">
                                <rich:column><h:outputText value="#{currentNote.body}" /></rich:column>
                                <rich:column><h:outputText value="#{currentNote.dateAdded}" /></rich:column>
                                <rich:column><h:outputText value="#{currentNote.note_type}" /></rich:column>
                            </rich:dataTable>
                 </rich:column>
        </rich:dataTable>

The problem is that only the first entry in my table displays ok. It is in the table and I can toggle image for notes. The rest of the entries are just one after each other (outside table with no formatting. Clicking on the image will open a table with related notes formatted properly

Answer 1

Sure.

Use

<rich:dataTable value="#{myBean.records}" var="myRecord">

<rich:subTable  rendered="#{myRecord.subValue != null}" 
 value="#{myRecord.subValue}" >
...
</rich:subTable>
</rich:dataTable>

Where in the bean:

public List<Records> getRecords() {
        return records;
}

and Records class has sub records subValues.

Answer 2

<rich:dataTable id="calltable" value="#{accountsBean.musicboxes}"
                var="currentMusicBox">
    <rich:column id="suitable" colspan="12" width="0" breakBefore="true"
                 style="border-color: #549FBE; border-style: solid; border-width: 1px;
                 display: #{!VwCallListServiceBean.show?'none':'show'};">
        <rich:dataTable value="#{currentMusicBox.notes}" var="currentNote"
                        border="0" rules="none"
                        style="border: none; margin: 0px; padding: 0px;">
            <rich:column width="800px" style="border: none; margin: 0px; padding: 0px;"
                         colspan="12">
                <span style="color: #3A84A7;">
                    â–º
                </span>
                <h:outputText value=" #{currentNote.body}"/>
            </rich:column>
        </rich:dataTable>
    </rich:column>
</rich:dataTable>

I have used this modify it as per your requirement....