Problem when updating datafable component of primefaces

Question

Problem when updating datafable component of primefaces

Navigation

#1 by (2 votes)

2

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

<p:remoteCommand name="refrescarTabla"
    actionListener="#{bean.dlgEditar.refrescarTabla}"
    update="pgTabla"/>
    <h:panelGroup id="pgTabla">
         <p:dataTable id="tabla" var="reg"
              value="#{bean.dlgEditar.datos}" editable="true" editMode="cell"
                                     widgetVar="cellDato">
         <p:ajax event="cellEdit"
              listener="#{bean.dlgEditar.alEditarRegistro}"
              oncomplete="refrescarTabla()"/>
        ...
        </p:datatable>
</h:panelGroup>

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.

EDITION 1

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.

java datatable primefaces

asked by hecnabae 02.04.2018 в 15:10

source

1 answer

How to show the values in each bar of a chart Why do I eat part of the content when I put the fixed menu?

score 2 · Accepted 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

Result?

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"
                 update="dtIngredientes"/>

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.