Question

We’re looking for a way to implement subtables in JSF 1.1. We cannot use Rich Faces due to the fact that out target server is WebSphere 6.1. I’ve tried JSTL and Tomahawk to no avail. Also, our project is using JSP’s and not facelets.

Answer 1

You can nest h:dataTables in each other inside a h:column. But you actually want to nest another h:dataTable inside a new row subsequently. There’s then no other way to create a single column and put a h:panelGrid in it to represent the “main” row and a nested h:dataTable to represent the “detail” row. You also need a good shot of CSS to get it all nicely aligned and some smart piece of JavaScript to show/hide the “detail” row.

Here’s a basic kickoff example:

<h:dataTable value="#{bean.orders}" var="order">
    <h:column>
        <h:panelGrid columns="3">
            <h:graphicImage id="expand" value="expand.gif" onclick="toggleDetails(this);" />
            <h:outputText value="#{order.id}" />
            <h:outputText value="#{order.name}" />
        </h:panelGrid>
        <h:dataTable id="details" value="#{order.details}" var="detail" style="display: none;">
            <h:column><h:outputText value="#{detail.date}" /></h:column>
            <h:column><h:outputText value="#{detail.description}" /></h:column>
            <h:column><h:outputText value="#{detail.quantity}" /></h:column>
        </h:dataTable>
    </h:column>
</h:dataTable>

The toggleDetails() function can look like (note that it takes JSF generated client ID into account):

function toggleDetails(image) {
    var detailsId = image.id.substring(0, image.id.lastIndexOf(':')) + ':details';
    var details = document.getElementById(detailsId);
    if (details.style.display == 'none') {
        details.style.display = 'block';
        image.src = 'collapse.gif';
    } else {
        details.style.display = 'none';
        image.src = 'expand.gif';
    }
}