如何在单元格编辑后更新 primefaces 数据表行？

Question

In my datatable depending on the column "Délai action", the other columns have to be in red when no date is in. The last column has a yellow / orange / red ball icon depending on the date. So how to update the row and then show the columns in red or not and the corresponding color ball?

I tried different things like:

<p:ajax event="cellEdit" listener="#{prospectionForm.enregistrer}" update="cmpTableMandats"/>

Or also in my enregistrer() method: RequestContext.getCurrentInstance().update(table.getClientId(FacesContext.getCurrentInstance()) + ":" + event.getRowIndex() + ":objet");

Here is the datatable:

<p:dataTable id="cmpTableMandats" value="#{prospectionForm.listMandats}"
                        var="mandat" rows="50" rowKey="#{mandat.id}"
                        scrollable="true" scrollHeight="440"
                        editable="true" editMode="cell" 
                        emptyMessage="#{msg['AucuneDonneeAAfficher']}"
                        paginator="true" paginatorPosition="bottom"
                        paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="50,100,200,300"
                        style="margin-top:20px">

                        <p:ajax event="cellEdit" listener="#{prospectionForm.enregistrerModification}" update=""/>

                        <p:column headerText="#{msg['Numero']}" style="width:12%">
                            <h:outputText value="#{mandat.numero}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                        </p:column>

                        <p:column headerText="#{msg['AbregeDirecteur']}" style="width:4%">
                            <h:outputText value="#{mandat.coordinateur.initiales}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                        </p:column>

                        <p:column headerText="#{msg['AbregeChefDeProjet']}" style="width:4%">
                            <h:outputText value="#{mandat.chefProjet.initiales}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                        </p:column>

                        <!-- Affiche la localité pré-enregistrée ou la localité libre -->
                        <p:column headerText="#{msg['Localite']}" style="width:15%">
                            <h:outputText value="#{mandat.listMandatLocaliteToString}"
                                rendered="#{not empty mandat.listMandatLocalite}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                            <h:outputText value="#{mandat.localiteLibre}"
                                rendered="#{not empty mandat.localiteLibre}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                        </p:column>

                        <p:column headerText="#{msg['AbregeMaitreOuvrage']}" style="width:20%">
                            <h:outputText value="#{mandat.listMandatIdentiteToString}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' :  null}"/>
                        </p:column>

                        <p:column headerText="#{msg['Objet']}" style="width:30%">
                            <h:outputText id="objet" value="#{mandat.objet}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                        </p:column>

                        <p:column headerText="#{msg['CHF']}" style="width:10%; text-align:right">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{mandat.montantHonorairesFrais}" rendered="#{mandat.montantHonorairesFrais != 0.0}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}">
                                        <f:convertNumber pattern="#,##0.00" locale="fr_CH"/>
                                    </h:outputText>
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{mandat.montantHonorairesFrais}"
                                            converterMessage="Cannot convert to double.">
                                        <f:convertNumber pattern="#,##0.00" locale="fr_CH"/>
                                    </p:inputText>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="#{msg['EtapeActuelle']}" style="width:13%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{mandat.fluxProspectionCi.nom}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                                </f:facet>
                                <f:facet name="input">
                                    <p:selectOneMenu value="#{mandat.fluxProspectionCi}">
                                        <f:selectItems value="#{prospectionForm.listFluxProspection}"/>
                                    </p:selectOneMenu>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="#{msg['Remarque']}" style="width:30%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{mandat.remarqueProspection}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}"/>
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputTextarea value="#{mandat.remarqueProspection}"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column id="cmpDateAction" headerText="#{msg['Delai']} #{msg['Action']}" style="width:10%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{mandat.dateActionProspection}" styleClass="#{(mandat.fluxProspectionCi eq 'ETABLIR_OFFRE' or mandat.fluxProspectionCi eq 'A_RELANCER') and mandat.dateActionProspection == null ? 'red' : null}">
                                        <f:convertDateTime pattern="dd.MM.yy"/>
                                    </h:outputText>
                                </f:facet>
                                <f:facet name="input">
                                    <p:calendar id="cmpDate"
                                        value="#{mandat.dateActionProspection}" showOn="true"
                                        pattern="dd.MM.yyyy" mask="true" locale="fr" styleClass="myInputClass">
                                    </p:calendar>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="" style="width:10%;">
                            <h:graphicImage id="un" rendered="#{mandat.dateProspectionDepassee}" value="/resources/images/icones/rwb/ball_red.png"/>
                            <h:graphicImage id="deux" rendered="#{mandat.dateProspectionAujourdhui}" value="/resources/images/icones/rwb/ball_orange.png"/>
                            <h:graphicImage id="trois" rendered="#{not mandat.dateProspectionDepassee and not mandat.dateProspectionAujourdhui and mandat.dateProspectionDans5JoursouMoins}" value="/resources/images/icones/rwb/ball_yellow.png"/>
                        </p:column>

                        <f:facet name="footer">  
                            #{fn:length(prospectionForm.listMandats)} #{msg['MandatsEnregistres']}  
                        </f:facet>
                    </p:dataTable>`

But nothing works fine

Thanks in advance

Primefaces 6.0 / JSF 2.3

Answer 1

Please use p:remoteCommand

Explanation can be found in this answer by @BalusC

For more information about p:remoteCommand , please refer to Primefaces showcase RemoteCommand .

Regards,

Answer 2

You can update a specific row using the @row(n} selector in combination with a <p:remoteCommand> . PrimeFaces Support showed me this:

https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression?id=primefaces-selectors-pfs

For this you save the current row index in your cell event listener like:

public void onCellEdit(final CellEditEvent<T> event)
{
    this.cellEditRowIndex = event.getRowIndex();
}

Create a remote command to use that index:

<!-- update specific row on cell edit event -->
<p:remoteCommand id="remoteCommandOnCellEdit"
    name="remoteCommandOnCellEdit" 
    update="#{bean.model.cellEditRowIndex eq null ? null : 
        'tableId:@row('.concat(bean.model.cellEditRowIndex).concat(')')}" />

Update and fire the remoteCommand in the cellEdit definition:

<p:ajax event="cellEdit" listener="#{bean.model.onCellEdit}" 
    process="@this" update=":growl, @form:remoteCommandOnCellEdit"
    oncomplete="remoteCommandOnCellEdit();"/>

Not a perfect solution cause there is a significant delay with a second request to update the row and other dependent cell values but its working.

Update programmatically in cellEdit listener? - not working!

I also tried using @row(n) inside the onCellEdit java listener function to update the row programmatically but it does not work. PrimeFaces still interferes the response only allowing the cell content to be updated.

public void onCellEdit(final CellEditEvent<T> event)
{
    // update row with ajax explicit - not working - PrimeFaces interferes in response only updating cell content
    if (event.getSource() instanceof DataTable)
    {
        final DataTable table = (DataTable) event.getSource();

        final String rowClientId = table.getClientId() + ":@row(" + event.getRowIndex() + ")";

        final String[] clientIds = SearchExpressionFacade
            .resolveClientIds(context, context.getViewRoot(), rowClientId).split(" ");
        for (final String clientId : clientIds)
            context.getPartialViewContext().getRenderIds().add(clientId);
    }
}