How to update a primefaces datatable row after cell editing?

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,