Primefaces DataTable cellEditor - Update cell content

Question

I have created a dataTable with an editable cell (component <p:cellEditor>), taking as reference the primefaces example.

<h:form id="form">
    <p:dataTable id="table" value="#{cars}" var="entity" editable="true" editMode="cell" tableStyle="width:auto">
        <p:ajax event="cellEdit" listener="#{carBean.onCellEdit}" />
        <p:column headerText="Owner">
            <p:cellEditor id="ownerCell">
                <f:facet name="input">
                    <p:selectOneMenu value="#{entity.owner.id}" style="width:100%">
                        <f:selectItems value="#{ownerBean.owners}" var="owner" itemLabel="#{owner.name}" itemValue="#{owner.id}" />
                    </p:selectOneMenu>
                </f:facet>
                <f:facet name="output">
                    <h:panelGroup id="ownerOutput"><h:outputText value="#{entity.owner.name}" /></h:panelGroup>
                </f:facet>
            </p:cellEditor>
        </p:column>

My problem is the update of the cell. I can change the value of the selectOneMenu element but the facet component output (id="ownerOutput") is not updated. I have checked that only when the facet input and output have the same value of the attribute value, i.e.

<p:selectOneMenu value="#{entity.owner.name}" style="width:100%">
    <f:selectItems value="#{ownerBean.owners}" var="owner" itemLabel="#{owner.name}" itemValue="#{owner.name}" />

then the code works. But I want to use my original code with id. Other solutions that I tried without success:

Solution 1:

<p:ajax event="cellEdit" listener="#{carBean.onCellEdit}" update="table" />

Solution 2:

public void onCellEdit(CellEditEvent event) {
Object newValue = event.getNewValue();
if(newValue != null) {
    int alteredRow = event.getRowIndex();
    String columnName = event.getColumn().getHeaderText();
    FacesContext context = FacesContext.getCurrentInstance();
    Account entity = context.getApplication().evaluateExpressionGet(context, "#{entity}", Car.class);
    entity = service.findAndLoadEntityWithLazyReferencesById(Car.class, entity.getId());
    if(columnName.equals("Owner") {
        entity.setUsername((String) newValue);
    }
Owner owner = service.findEntityById(Owner.class, (Long) newValue);
        entity.setOwner(owner);
try {
        service.createOrUpdateEntity(entity);
    }
    catch (Exception e) {
        e.printStackTrace();
    }
if(columnName.equals("Owner") {
        RequestContext.getCurrentInstance().update("form:table:" + String.valueOf(alteredRow) + ":memberCell");
    }

Unknown Unknown · Accepted Answer · 2018-09-26T06:48:24

your problem is not the update of the components, actually they're pretty well updated. its the submit. your selectOneMenu is not submitted when you choose an option. you need to put an ajax inside it. a simple <p:ajax/> will do it.

<p:selectOneMenu value="#{entity.owner.id}" style="width:100%">
    <f:selectItems value="#{ownerBean.owners}" var="owner" itemLabel="#{owner.name}" itemValue="#{owner.id}" />
    <p:ajax/>
</p:selectOneMenu>

Primefaces DataTable cellEditor - Update cell content

1 Answers