Home / Questions / 152233
Accepted
hecnabae
Asked: 2020-04-03 05:10:08 +0800 CST 2020-04-03 05:10:08 +0800 CST

Problem updating datatable component of primefaces

  • 772

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 first edit a table cell, the component works correctly.

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

I have seen some recommendations like this post from BalusC on SO: https://stackoverflow.com/a/19927578/2131029 , however I have not been able to solve the problem.

EDITION 1

I just created an example that reproduces the problem: https://github.com/hecnabae/pf-datatable .

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

To reproduce the problem, we simply try to edit the quantity of one ingredient, and then click on the quantity of another ingredient (to edit it as well). We will see the effect of instant loss of focus.

java

1 Answers

  1. Best Answer

    The problem originates from the following sequence of events:

    • User clicks on a cell
    • PF starts the edition of this
    • User optionally modifies its value
    • User clicks on another cell
    • PF triggers the cellEdit event of the first cell
    • PF starts editing another cell
    • Terminates the ajax call started bycellEdit
    • PF summons thep:remoteCommand
    • PF updates the entire table, losing the editing view of the other cell

    Result?

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

    What happens is a logical consequence when performing the complete 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 the p:dataTableonce the one p:remoteCommandthat 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 rather full row editing. This makes it more difficult to quickly edit different rows while reloading the entire table.

    • Lastly, you could separate the independent data from the dependent data, thus simply updating the dependent table.
    • 3