How to load a nested List with PrimeFaces

Question

I want to show a list of items with single select. Up on selecting an item, a dialog should appear showing details of that item. So far the list and selecting and even some details are showing, but a nested list is emtpy.

JSF source:

<f:view>
      <h:form id="studyListForm">
        <!-- Main list with selectable Items -->
        <h:outputText value="Study List"/>
        <p:dataTable id="studyList" selection="#{studyRepositoryController.selectedStudy}" selectionMode="single" value="#{studyRepositoryController.studyList}" var="item">

          <p:ajax event="rowSelect" listener="#{studyRepositoryController.onRowSelect}"   
              update=":studyListForm:display :studyListForm:studyPropertyList :headnavigation:growl" oncomplete="studyDialog.show()" />  

          <p:ajax event="rowUnselect" listener="#{studyRepositoryController.onRowUnselect}" update=":headnavigation:growl" />

          <p:column headerText="ID" >
            <h:outputText value="#{item.id}"/>
          </p:column>
          <p:column headerText="Name">
            <h:outputText value="#{item.name}"/>
          </p:column>
        </p:dataTable>

        <!-- The dialog for a single item -->
        <p:dialog id="dialog" width="600" height="400" header="Study" widgetVar="studyDialog" resizable="true" showEffect="fade" hideEffect="explode">
          <!-- Study Details -->
          <h:panelGrid id="display" columns="2" cellpadding="4" rowClasses="aligntop">
            <h:outputText value="ID"/>
            <h:outputText value="#{studyRepositoryController.selectedStudy.id}"/>

            <h:outputText value="Name"/>
            <h:outputText value="#{studyRepositoryController.selectedStudy.name}"/>

          </h:panelGrid>

          <!-- Property List -->
          <p:dataTable id="studyPropertyList" value="#{studyRepositoryController.selectedStudy.studyPropertyList}" var="item">
            <p:column headerText="ID" >
              <h:outputText value="#{item.id}"/>
            </p:column>
            <p:column headerText="property" >
              <h:outputText value="#{item.property}"/>
            </p:column>
            <p:column headerText="text_value" >
              <h:outputText value="#{item.textValue}"/>
            </p:column>
          </p:dataTable>
        </p:dialog>
      </h:form>
    </f:view>

As explained, most of it works. The main list is shown and when I click on an item, the dialog appears showing the id and name of the selected item. But the nested list

#{studyRepositoryController.selectedStudy.studyPropertyList}

is emtpy. And so the datatable shows no rows: enter image description here

The list itself is a simple database entity:

  public PrimeStudy getStudyList(){
    log.info("-!-");
    List<Study> list = (List<Study>) em.createNamedQuery("Study.findAll").getResultList();

    Iterator<Study> it = list.iterator();
    while(it.hasNext()){
      Study s = it.next();
      log.debug("Study " + s.getId() + " PropertyListSize:" + s.getStudyPropertyList().size());
    }
    PrimeStudy modelList = new PrimeStudy(list);

    return modelList;
  }

And the debug output shows:

 -!-
 Study 1 PropertyListSize:2
 Study 2 PropertyListSize:0
 Study 3 PropertyListSize:0
 Study 4 PropertyListSize:0
 Study 5 PropertyListSize:0

Any suggestions?

[Update] I added the missing dataTable update in the ajax event as suggested by partlov to show a working solution.

partlov partlov · Accepted Answer · 2013-03-14T08:24:51

As I can see you didn't update your second dataTable. Add studyPropertyList to your update list of p:ajax event for selecting row. Also you really should not create your list in getter, do that in @PostConstruct method as getter is called multiple times during page lifecycle.

How to load a nested List with PrimeFaces

2 Answers