So I've 2 lists which come one of them comes from database, second one is updated with passed name later on. First list is fetched on @PostConstruct method when user displays a page, second list is updated for every name value from etiquette.
showClients.java bean with @ViewScoped value
private List<Etiquette> etiquetteList;
private List<Client> clientList;
...getters and setters
@PostConstruct
public void init() {
HttpSession session = SessionUtil.getSession();
User user = (User) session.getAttribute("user");
etiquetteList = etiquetteDAO.getAllEtiquettes(user);
System.out.println(etiquetteList);
}
public List<Client> showClientsForEtiquette(String etiquetteName) {
clientList = clientDAO.findClientsByEtiquetteName(etiquetteName);
System.out.println(clientList);
return clientList;
}
For now everything works fine. I've etiquetteList and clientList are filled with data. Since I started working with those data for debbuging purposes I've done this
<h:form>
<ui:repeat value="#{showClients.etiquetteList}" var="etiquette">
<p:panel id="horizontal" header="#{etiquette.name}" toggleSpeed="100" toggleable="true" toggleOrientation="vertical" collapsed="true" >
<p:panelGrid columns="3" layout="grid" styleClass="showcase-text-align-center" >
<h:outputText value="Client name"/>
<h:outputText value="Client email"/>
<h:outputText value="Show details"/>
</p:panelGrid>
<p:panelGrid id="clientData" styleClass="showcase-text-align-center">
<ui:repeat value="#{showClients.clientList}" var="client">
<p:panelGrid columns="3" layout="grid" styleClass="showcase-text-align-center" >
<h:outputText value="#{client.name}"/>
<h:outputText value="#{client.email}"/>
<p:commandButton value="details" type="button" onclick="PF('clientDetails').show();" >
<f:param name="client" value="client"/>
</p:commandButton>
</p:panelGrid>
</ui:repeat>
</p:panelGrid>
</p:panel>
</ui:repeat>
</h:form>
But this way is clumsy and I would like to display those data in very different way. I would like to display it in dataTable using PrimeFaces library to do so - I want functionality like toggleable ( toggleable in a way that you can just click on etiquette name and show/hide client information ), pagination, lazy fetch etc. As far as I have tried to implement that I have done this.
<h:form id="groupForm">
<h:form>
<p:dataTable value="#{showClients.etiquetteList}" var="e" sortBy="#{e.name}" expandedRow="false" expandableRowGroups="true" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
rowsPerPageTemplate="5,10,15" >
<p:headerRow>
<f:facet name="header">
<p:column colspan="3">
<h:outputLabel value="#{e.name}" />
</p:column>
</f:facet>
</p:headerRow>
<p:column colspan="3" style="margin: 20px 0;" >
<p:dataTable value="#{showClients.showClientsForEtiquette(e.name)}" var="c" lazy="true" expandedRow="false">
<p:column headerText="Email">
#{c.email}
</p:column>
<p:column headerText="Szczegóły">
<p:commandButton value="Szczegóły"/>
</p:column>
<p:column headerText="Usuń" >
<p:commandButton value="Usuń"/>
</p:column>
</p:dataTable>
</p:column>
</p:dataTable>
</h:form>
This is how I'd like to show my data. How can I approach this? I've read that you cannot set header of table because tables are generated row by row and the data isn't there yet to display as header. Any workarounds of that ? Also how can I make my table row ( this row with e.name ) to be toggleable? Use some panelGrid inside dataTable?
+----------------------------------------------------+
| e.name (value) |
+-----------------------------------------------------
| Email (string) | Detail (string) | Delete (string) |
| c.email | button | button |
