Search code examples
jsfprimefacesprimefaces-datatable

Primefaces cell edit leave in edit mode when validation fails

I am using p:dataTable with cell editing and validator on a p:selectOneMenu with editable=true . I want the cell edit state to stay in edit mode (second screenshot) if the selected p:selectOneMenu value or typed in value is invalid and show the red box around the input like I can if I use a regular form (third screenshot). When the validation fails, the growl and messages are displayed but the red box around the dropdown doesn't persist and I am afraid might go unnoticed by the user (first screenshot). I can't figure out how to do ajax updates to show the red box, but keep the cell in edit mode so that the dropdown and red box are still visible.

<p:dataTable id="table" value="#{bean.data}" var="lineItem" editable="true" editMode="cell">

<p:column headerText="* Account">
  <p:cellEditor>
    <f:facet name="output">
       <h:outputText value="#{lineItem.account}" />
    </f:facet>

    <f:facet name="input">
      <p:selectOneMenu id="so" value="#{lineItem.account}" editable="true" dynamic="true"  converter="omnifaces.SelectItemsConverter" title="Type an account or select a stored favorite" validator="com.gdeb.rozycki.app.acountValidator" >

      <f:selectItem noSelectionOption="true" itemLabel="---Favorites" itemValue="null" />
      <f:selectItems value="#{bean.favorites}" var="fav" itemLabel="#{fav.acctNum}" itemValue="#{fav}" />
                                            
      <p:ajax disabled="#{facesContext.validationFailed}" update="table growl messages" listener="#{bean.updateAccountInline(lineItem)}" />
      </p:selectOneMenu>
    </f:facet>
  </p:cellEditor>
</p:column>

This screenshot I tried changing the account to a stored favorite that was saved with a space and we don't want spaces anymore. (Yes I now have validation to not allow a space when user save their favorite account numbers, but there are other validations we will be implementing) When the validation fails, just the header and growl message show. The red out line isn't visible until they click on the dropdown again as show in the second screenshot.

enter image description here enter image description here enter image description here

Solution

  • The ajax call had the datatable id table in its update attribute. I removed that ClientID and removed disabled="#{facesContext.validationFailed}"

    I think the cellEdit function automatically updates the component ClientId that is implementing the cellEdit. So no need to also explicitly specify in my ajax tag.

    And I am also guessing that the ajax tag always runs the update but the listener only with a success.

    I may not fully understand why but this is what works for me:

      <p:ajax update="growl messages" listener="#{bean.updateAccountInline(lineItem)}" />