Disappearing p:DataTable on cellEdit p:ajax event

Question

I use NetBeans 8.2, GlassFish 5.0, PrimeFaces 5.0. I created a page with a cell editable data table. When I do the modification on one cell after the ajax event the whole data table replaced by the modified value. Just like the ajax respond does not send back the whole table contents. How can I correct it?

The facelet:

    <h:form id="frmDemands">
        <p:growl id="msgs" showDetail="true"/>
        <div>
        <p:dataTable 
            id="dtblDemands" 
            value="#{demandUtility.demands}" 
            var="demand" 
            editable="true" 
            editMode="cell" 
            paginator="true" 
            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="5,10,15">
            <p:ajax event="cellEdit" listener="#{applicantBean.onCellEdit}" update=":frmDemands :frmDemands:msgs"/>
            <f:facet name="header">Demands</f:facet>
            <p:column headerText="ID">
                <h:outputText value="#{demand.id}"/>
            </p:column>
            <p:column headerText="Amount">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{demand.amount}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{demand.amount}"/></f:facet>
                </p:cellEditor>
            </p:column>
            <p:column headerText="State">
                <h:outputText value="#{demand.state}"/>
            </p:column>
            <p:column>
                <p:commandButton value="Delete" rendered="#{applicantBean.isDemandDeleteable( demand )}" actionListener="#{applicantBean.onDeleteDemand( demand.id )}" update="@form"/>
            </p:column>
        </p:dataTable>
        </div>
    </h:form>

The backing bean handle the cellEdit event:

@Named
@RequestScoped
@Data
public class ApplicantBean
{

  @Inject
  private DemandUtility demandUtility;

  ...

  public void onCellEdit( CellEditEvent event_ )
  {
    int rowIndex = event_.getRowIndex();
    double newValue = (Double) event_.getNewValue();
    Demand demand = demandUtility.getDemands().get( rowIndex );
    demand.setAmount( newValue );

    Event event = new Event( demandUtility.getNextEventId(), new Date(), "Demand (" + demand.getId() + ") modified! New amount: " + newValue );
    demandUtility.getEvents().add( event );
  }

  ...

}

When I try to set the @parent value to the update attribute of the ajax event the dataTable disappears as well.

Can somebody help me, please?

@XtremeBiker You are right! It was an obvious mistake from me! Thanks for your comment! — SOLID Developper

Mihawk Mihawk · Accepted Answer · 2018-07-12T13:45:30

Create a which updates you table and change your Scope to @ViewScoped It worked for me.

<h:form id="frmDemands">
    <p:growl id="msgs" showDetail="true"/>
    <p:remoteCommand name="rcCellEditUpdate" 
                     update=":frmDemands:dtblDemands :frmDemands:msgs" />
    <div>
        <p:dataTable 
            id="dtblDemands" 
            value="#{demandUtility.demands}" 
            var="demand" 
            editable="true" 
            editMode="cell" 
            paginator="true" 
            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="5,10,15">
            <p:ajax event="cellEdit" listener="#{applicantBean.onCellEdit}" oncomplete="rcCellEditUpdate();"/>
            <f:facet name="header">Demands</f:facet>
            <p:column headerText="ID">
                <h:outputText value="#{demand.id}"/>
            </p:column>
            <p:column headerText="Amount">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{demand.amount}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{demand.amount}"/></f:facet>
                </p:cellEditor>
            </p:column>
            <p:column headerText="State">
                <h:outputText value="#{demand.state}"/>
            </p:column>
            <p:column>
                <p:commandButton value="Delete" rendered="#{applicantBean.isDemandDeleteable( demand )}" actionListener="#{applicantBean.onDeleteDemand( demand.id )}" update="@form"/>
            </p:column>
        </p:dataTable>
    </div>
</h:form>

Disappearing p:DataTable on cellEdit p:ajax event

1 Answers