Editable datatable with dynamic columns

Question

I have a Seam 2.2 JSF 1.2 application deployed on JBoss 5. I need to create a page with a complex, editable datatable; data is displayed across as well as down.

I have an employee:

Employee {
    int id;
    String name;
    ...
}

I have certification types:

Certs {
    int id;
    String certType;
    ...
)

and I have events of type Certs held by employees:

Events {
    int id;
    int employeeId;
    int certId;
    Date start;
    Date end;
    ...
}

I need to display the data across by dynamically generated cert type (number of cert columns are not known til the user selects them), if multiple cert types are selected and an employee has no event for that cert type the cells for that cert type should be empty.

Valid XHTML

I can generate the correct format using rich:datatable with rich:columns and rich:column, but that's only display - I need to be able to edit the rows in place.

I'm working on generating the table in the backing bean using HtmlDataTable, but Seam does not play well with JSF binding.

The hardest bit for me to wrap my head around is making vertical data (an employee with related event information, one row for every event) horizontal (an employee event event event).

Anybody have any recommendations or advice on the best way to approach this efficiently?

I'll post what I've tried, but this is pretty long already, so I'll add more as needed.

score 0 · Accepted Answer · answered Apr 16 '13 at 14:46

What I ended up doing was using a combination of components to make this work. I created an object that converts rows of employee data into one row. So data from the db that returns: Jones certtype1 start end

Jones certtype2 start end

Jones certtype3 start end

Becomes:

Jones certtype1(start, end) certtype2(start, end) certtype3(start, end)

And organized it like:

 <rich:dataTable id="acadCertList"
value="#{myCertBean.employeeCertEventObjects}"
var="_certs" rowKeyVar="row" >

  <f:facet name="header">

<rich:columnGroup>
    <rich:column>
        <h:outputText value="Row" />
    </rich:column>
    <rich:column>
    <h:outputText value="Name" />
    </rich:column>

  <!-- dynamically create the certType1, certType2 …  column headers -->
    <rich:columns value="#{myCertBean.selectedCertTypeList}"
            var="_selCrtType" colspan="2">
        <h:outputText value="#{_selCrtType.certType}" />
    </rich:columns>
</rich:columnGroup>
 </f:facet>

 <rich:subTable value="#{_certs}" var="_cEmpObj">
<f:facet name="header">
  <!-- repeat start end column headers for each certType -->

    <rich:columnGroup>
        <rich:column>
 </rich:column>
        <rich:column>
        </rich:column>
        <c:forEach items="#{myCertBean.selectedCertTypeList}">
 <rich:column>
                <h:outputText value="Start" />
            </rich:column>
 <rich:column 
                <h:outputText value="End" />
            </rich:column>
 </c:forEach>
    </rich:columnGroup>
</f:facet>
 <!-- load data for each row -->

<rich:column id="row_#{row}">
    <h:outputText value="#{row+1}" />
</rich:column>
<rich:column id="name_#{row}">
    <h:outputText value="#{_cEmpObj.name}/>
</rich:column>

<c:forEach items="#{myCertBean.selectedCertTypeList}" varStatus="status">
    <rich:column id="curexp_#{status.index}" 
        <h:outputText
 value="#{_cEmpObj.certEventsByCertTypeSysid[status.index].startDate}" />
    </rich:column>
    <rich:column id="curexp_#{status.index}" 
        <h:outputText
 value="#{_cEmpObj.certEventsByCertTypeSysid[status.index].endDate}" />
    </rich:column>
 </c:forEach> 

 </rich:subTable>

 </rich:dataTable>

Editable datatable with dynamic columns

1 Answers1