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

did you see this post [Color row by condition](https://stackoverflow.com/questions/42768759/coloring-a-case-in-a-primefaces-datatable-by-a-condition/42786061#42786061) ?!? — Yagami Light, May 23 '17 at 10:37
yes I did but the problem is "How to update a primefaces datatable row after cell editing?". Thanks — fipro28, May 23 '17 at 11:25
Possible duplicate of [Updating entire on complete of ](https://stackoverflow.com/questions/19548838/updating-entire-pdatatable-on-complete-of-pajax-event-celledit) — Kukeltje, Aug 14 '18 at 13:35

score 3 · Accepted Answer · answered May 31 '17 at 01:32

3

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,

answered May 31 '17 at 01:32

Tonkichi

251
2
7

score 0 · Answer 2 · answered Nov 16 '22 at 01:20

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);
    }
}

How to update a primefaces datatable row after cell editing?

2 Answers2