3

Estoy desarrollando una aplicación Primefaces 6.2 en la que utilizo el componente datatable en modo de edición.

<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>

Cuando edito por primera vez una celda de la tabla, el componente funciona correctamente.

Hay columnas que dependen de otras, de modo que, cuando realizo algún cambio en una celda, debo refrescar la tabla (para ello utilizo el componente remoteCommand) para reflejar los cambios. A partir de este momento aparece el problema, y es que si intento editar de nuevo una celda, dicha celda pierde el foco en cuestión de menos de un segundo, con lo que no puedo editar el valor.

He visto algunas recomendaciones como este post de BalusC en SO: https://stackoverflow.com/a/19927578/2131029, sin embargo no he conseguido solucionar el problema.

EDICION 1

Acabo de crear un ejemplo que reproduce el problema: https://github.com/hecnabae/pf-datatable.

El ejemplo muestra en forma de tabla los ingredientes de una receta. Los campos que muestra son nombre, cantidad y porcentaje. Al editar un campo (cantidad es editable), se lanza el remotecommand para actualizar la tabla.

Para reproducir el problema, simplemente intentamos editar la cantidad de un ingrediente y, a continuación, hacemos click sobre la cantidad de otro ingrediente (para editarla también). Veremos el efecto de pérdida instantanea del foco.

12
  • que hacen los metodos bean.dlgEditar.refrescarTabla y bean.dlgEditar.alEditarRegistro ?
    – Klaimmore
    Commented el 2 abr. 2018 a las 14:13
  • refrescarTabla llama al remoteCommand, básicamente hace un update sobre el contenedor de la tabla (pgTabla). Mientras que alEditarRegistro realiza los calculos y actualiza el listado de datos (datos) con los nuevos valores.
    – hecnabae
    Commented el 2 abr. 2018 a las 14:17
  • comprendo, pero me refiero al actionListener="#{bean.dlgEditar.refrescarTabla}" en p:remoteCommand y al listener="#{bean.dlgEditar.alEditarRegistro}" de p:ajax. Al parecer en ambas partes podrias realizar el calculo, prueba solo especificar un listener, no ambos.
    – Klaimmore
    Commented el 2 abr. 2018 a las 14:31
  • ya hice varias pruebas, pero el resultado es el mismo.
    – hecnabae
    Commented el 2 abr. 2018 a las 14:55
  • si abres la consola del browser en el apartado de solicitudes ajax o xhr, en que cambian las solicitudes cuando funciona bien a cuando funciona mal?
    – Klaimmore
    Commented el 2 abr. 2018 a las 15:05

1 respuesta 1

3

El problema se origina en la siguiente secuencia de eventos:

  • Usuario hace click en una celda
  • PF inicia la edicion de esta
  • Usuario opcionalmente modifica su valor
  • Usuario hace click en otra celda
  • PF gatilla el evento cellEdit de la primera celda
  • PF inicia la edicion de otra celda
  • Finaliza la llamada ajax iniciada por cellEdit
  • PF invoca al p:remoteCommand
  • PF actualiza la tabla completa, perdiendose la vista de edicion de la otra celda

¿Resultado?

La vista html de la tabla y el estado interno del p:dataTable discrepan. La vista html queda renderizada como sin edicion activa, pero el estado interno del dataTable muestra que si hay una edicion activa.

Lo que ocurre es una consecuencia logica al realizar la actualizacion completa, primefaces no soporta que al editar una celda toda la tabla se actualice.

Soluciones posibles

  • Una solucion hack, seria modificar el estado interno del p:dataTable una vez se completa el p:remoteCommand que lo actualiza, de la siguiente forma:

    <p:remoteCommand name="refrescarTablaIngredientes"
                     oncomplete="PF('cellIngredientes').currentCell = null"
                     update="dtIngredientes"/>
    
  • Otra opcion, sería no utilizar edición de celdas, sino edición de filas completas. De esta forma, se hace mas difícil la edición rápida de diferentes filas mientras se recarga la tabla completa.

  • Por último, podrías separar los datos independientes de los que dependen de otros, así simplemente actualizarías la tabla dependiente.
1
  • Muy buen análisis, gracias!
    – hecnabae
    Commented el 3 abr. 2018 a las 16:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.