Primefaces datatable cell editing doesn't update

Question

I have a primefaces datatable with cell editing which is toggled on a boolean variable in the view.

I have three issues:

In edit mode, I change a value and I click the save button on the page it doesn't keep the new value, If I click anywhere else first on the page then click save it will keep the value. I need it to keep the value if you click save first.
If I edit a cell which is an input text and I click out the field now is a output text until I click in there again. I want the field to look like a input text while in edit mode.
When the save button is clicked the backing method sets the editable boolean to false, and the rest of the page obeys, and the dataTable looks like it obeyed but if you click a cell it will let you edit it.

Here is the code:

<p:dataTable value="#{view.LineItems}" var="lineItem" rowKey="#{lineItem.lineItemId}"
                 resizableColumns="false" editable="#{view.editable}" editMode="cell"
                 editingRow="#{view.editable}" id="requestLineItemsTable">

        <p:ajax event="cellEdit" listener="#{view.cellEdited}" immediate="true" update="@this" />

        <p:column styleClass="centerColumnData" headerText="Item Name" style="width: 140px;">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{lineItem.title}"/>
                </f:facet>
                <f:facet name="input">
                    <h:inputText value="#{lineItem.title}"/>
                </f:facet>
            </p:cellEditor>
        </p:column> ...

and this is the back end (not doing anything with this yet)

public void cellEdited(CellEditEvent event)
{
    Object oldValue = event.getOldValue();
}

and here is the save and edit buttons on the same .xhtml page as datatable

 <p:commandLink process="@this"
                       action="#{view.changeModeToEdit}"
                       update="@form"
                       rendered="#{!view.editMode">
            <h:graphicImage library="images" name="edit20.png" title="#{__Common.edit}"
                            style="height: 15px; width: 15px;"/>
        </p:commandLink>
<components:linkWithSpinner linkStyle="margin-right: 20px;" loadingImageStyle="margin-right: 20px;"
                                    linkStyleClass="activeButton saveButtonRequestDetails" loadingImageStyleClass="saveButtonRequestDetails"
                                    linkText="#{__CommonButton.save}"
                                    process="@form" update="@form"
                                    actionMethod="#{view.updateRequest()}"/>

view.updateRequest() sets the editable to false. I am using Primefaces 4.0

I updated to primefaces 5 and that fixed issue 3, then to fix issue 1 I had to add async="true" to the p:ajax now it will not try to run the ajax after the save is clicked. I need to test this thoroughly now that the ajax call is asynchronous. — dsievers

dsievers dsievers · Accepted Answer · 2014-11-04T19:18:32

So I figured out a way around these issues. I was focused on using the built in edit table , but you can just have a normal datatable and the columns can contain input text fields. Then you don't have to worry about most of the issues in my question above. If you need to switch between edit and non-edit view then I still don't know how to fully fix it except have two datatables in your file with render tags, but then you are duplicating the table one with input text fields and one with output text fields, and that is not the best way to do it.

Primefaces datatable cell editing doesn't update

1 Answers