<p:ajax event=“rowEditCancel”> on my primeface's datatable don't update datatable

Question

I'm using Primefaces' p:dataTable to display an editable table and I'm using p:rowEditor to add or delete rows, when adding a row I add an object to the datalist and update the datatable, this works fine, but when I cancel edit I delete the added object to the datatable, the listener is fired but it doesn't update the datatable, any suggestions please. here is the .xhtml:

<h:form id="Users">
            <p:dataTable id="datalist"
                    value="#{beanController.listusr}" var="item"
                    selectionMode="single" editable="true"
                    styleClass="datalistdisplayusr"
                    selection="#{beanController.selectedusr}"
                    rowKey="#{item.usrId}"
                    paginator="true" rows="5" rowsPerPageTemplate="5,10,15">
                    <f:facet name="header">
                        <p:commandButton id="newusrButton" icon="ui-icon-plus"
                            value="Create"
                            actionListener="#{beanController.createusr}"
                            update=":Users:datalist" 
                            oncomplete="$('.datalistdisplayusr .ui-datatable-data .ui-row-editor .ui-icon-pencil').first().click();"
                            />
                    </f:facet>

                    <p:ajax event="rowEdit"
                        listener="#{beanController.saveusr}"
                        update=":Users:datalist" />
                    <p:ajax event="rowEditCancel"
                        listener="#{beanController.onCancel}"
                        update=":Users:datalist" />

                    <p:column style="width:6%">
                        <p:rowEditor />
                    </p:column>
                    <p:column >
                        <f:facet name="header">
                            <h:outputText value="Id" />
                        </f:facet>

                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{item.usrId}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText id="Id" value="#{item.usrId}"   />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column >
                        <f:facet name="header">
                            <h:outputText value="First Name" />
                        </f:facet>
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{item.usrName}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText id="FirstName" value="#{item.usrName}"  />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column >
                        <f:facet name="header">
                            <h:outputText value="Last Name" />
                        </f:facet>
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{item.usrSurName}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText id="SurName" value="#{item.usrSurName}" />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                </p:dataTable>

And here is the save method. Till now every thing works fine I have the object added and the datatable updated:

public void createusr(ActionEvent event) {
        UserDTO usr = new UserDTO();
        listusr.add(0, usr);            
}

and here is the onCancel listener:

public void onCancel(RowEditEvent event){ 
         list.remove(0);
}

The listener is fired and the object is deleted by I the datatable is not updated and instead of deleting the row I have the second row duplicated.

Please can you provide a real SSCCE with your problem? That way you make the code copy-paste and runnable. Here you have an example. — Xtreme Biker
Should it be listusr.remove(0) instead of list.remove(0)? — Mr.J4mes
yes It's listusr.remove(0) but I still have the same problem, the listener is fired but the datatable is not updated — RMDeveloper
I also have the same problem. The weird thing is that when I update the entire form from the rowEditCancel event then the dataTable loses all data and style. — jmoran

jmoran jmoran · Accepted Answer · 2018-05-10T20:32:49

I found a workaround here: PrimeFaces DataTable RowEditor updating cell elements on RowEditInit, but not on RowEdit or RowEditCancel

Basically, it consist in adding a p:remoteCommand in the oncomplete attribute of p:ajax:

<p:ajax oncomplete="updateDataTable()" event="rowEditCancel" listener="#{beanView.onRowEventCancelMethod}" global="false" process="@this"/>

and putting the p:remoteCommand outside the dataTable:

<p:remoteCommand name="updateDataTable" update="myDataTableId"/>

<p:ajax event=“rowEditCancel”> on my primeface's datatable don't update datatable

1 Answers