Problem when updating datafable component of primefaces


I am developing a Primefaces 6.2 application in which I use the datatable component in edit mode.

<p:remoteCommand name="refrescarTabla"
    <h:panelGroup id="pgTabla">
         <p:dataTable id="tabla" var="reg"
              value="#{bean.dlgEditar.datos}" editable="true" editMode="cell"
         <p:ajax event="cellEdit"

When I edit a cell in the table for the first time, the component works correctly.

There are columns that depend on others, so when I make a change in a cell, I must refresh the table (for this I use the remoteCommand component) to reflect the changes. From this moment the problem appears, and if I try to edit a cell again, the cell loses focus in less than a second, so I can not edit the value.

I have seen some recommendations like this post from BalusC in SO: link , however I have not been able to solve the problem.


I just created an example that reproduces the problem: link .

The example shows in table form the ingredients of a recipe. The fields that it shows are name, quantity and percentage. When editing a field (quantity is editable), the remotecommand is launched to update the table.

To reproduce the problem, we simply try to edit the amount of an ingredient, and then click on the amount of another ingredient (to edit it too). We will see the effect of instantaneous loss of focus.

asked by hecnabae 02.04.2018 в 15:10

1 answer


The problem originates in the following sequence of events:

  • User clicks on a cell
  • PF starts the editing of this
  • User optionally modifies its value
  • User clicks on another cell
  • PF triggers the cellEdit event of the first cell
  • PF starts the editing of another cell
  • Ends the ajax call initiated by cellEdit
  • PF invokes the p:remoteCommand
  • PF updates the entire table, missing the edit view of the other cell


The html view of the table and the internal state of p:dataTable disagree. The html view is rendered as no active editing, but the internal state of the dataTable shows that there is an active edit.

What happens is a logical consequence when performing the full update, primefaces does not support that when editing a cell the entire table is updated.

Possible solutions

  • A hack solution would be to modify the internal state of p:dataTable once the p:remoteCommand that updates it is completed, in the following way:

    <p:remoteCommand name="refrescarTablaIngredientes"
                     oncomplete="PF('cellIngredientes').currentCell = null"
  • Another option would be not to use cell editing, but to edit entire rows. In this way, it becomes more difficult to quickly edit different rows while recharging the entire table.

  • Finally, you could separate the independent data from those that depend on others, so you would simply update the dependent table.
answered by 03.04.2018 / 16:52