SelectBooleanCheckbox in editable DataTable doesn't change

Question

I have a dataTable that is editable (editMode = "cell").

Editing free text field and list box is quite straightforward. However, I cannot figure out how to edit checkbox field. To be more specific when I try to edit checkbox selection, the data in the output facet is not actualized after the change was made.

<p:dataTable id="submodels" var="submodel" value="#{projectMB.submodels}" 
             editable="true" editMode="cell" widgetVar="cellSubmodels">
  <p:column headerText="Mapping file">
    <p:cellEditor>
      <f:facet name="output">
        <h:selectBooleanCheckbox value="#{submodel.mapping}" onclick="return false;"
           style="width:96%" label="Root model" readonly="true"/>
      </f:facet>
      <f:facet name="input">
        <h:selectBooleanCheckbox value="#{submodel.mapping}" style="width:96%" 
           label="Root model"/>
      </f:facet>
    </p:cellEditor>
  </p:column>
</p:dataTable>

What is a bit suprising, when I change input facet into inputText (and enter true/false value in it), checkbox is updated properly:

<p:dataTable id="submodels" var="submodel" value="#{projectMB.submodels}" 
             editable="true" editMode="cell" widgetVar="cellSubmodels">
  <p:column headerText="Mapping file">
    <p:cellEditor>
      <f:facet name="output">
        <h:selectBooleanCheckbox value="#{submodel.mapping}" onclick="return false;"
           style="width:96%" label="Root model" readonly="true"/>
      </f:facet>
      <f:facet name="input">
        <p:inputText value="#{submodel.mapping}" style="width:96%" />
      </f:facet> 
    </p:cellEditor>
  </p:column>
</p:dataTable>

Can you point out what I have done wrong? I get no errors in javascript console and on Java server side.

I'm using Primefaces version 4.0

Gorgonian

Answer 1

This is a bug, or at least an oversight, in PrimeFaces.

According to the JavaScript code involved (saveCell() function in datatable.js), it only compares the input's new value with the old value before submitting the new value to the server, like so if (input.value != oldvalue). However, in case of checkboxes (and radio buttons) the input value is never changed. It's always the same. It's only the checked state which should trigger the browser to actually send the state to the server or not.

In other words, the JavaScript code involved should have checked if it's a checkbox (or radiobutton) and then check by if (input.checked != oldchecked) instead.

There's no way to fix it other than editing the primefaces.js/datatable.js. You'd best report this issue to PrimeFaces guys and get them to fix it.

In the meanwhile, you can workaround it by copying the value to a hidden input field.

<f:facet name="input">
    <h:inputHidden value="#{submodel.mapping}" />
    <h:selectBooleanCheckbox value="#{submodel.mapping}" onclick="$(this).prev().val(this.checked)" />
</f:facet>

Supervisor

Exactly here: github.com/primefaces/primefaces/blob/… – Earlie

@Hatem: yes, there :) – Supervisor

@BalusC: thanks a lot, I reported the issue on PrimeFaces issue tracker (I also checked the newest 4.0.24 version of PF, but they haven't fixed it yet) – Gorgonian

I am using PrimeFaces 5.1, and I attempted to use the code above, but it didn't work. However, I left the check button without any input or output facet. It remains editable and works just fine. It is simply not uniform with the whole process. I am not sure why they haven't released a patch for this issue, or is it already there in an Elite version? – Artifice

Moreover, I've just tested with editMode="cell" and editMode="row" and it worked as expected (with both facet input and output). – Artifice

The link to the location does not work anymore, was github.com/primefaces/primefaces/blob/master/src/main/resources/… the one? – Logo

The one problem with foregoing p:celleditor and input/output facets is that if you happen to permit deleting a row from the table, such as with a commandLink, the values in those columns won't stay with the rows that move as a result of the deletion. Oddly, this was accepted as the solution when the bug was reported [github.com/primefaces/primefaces/issues/1854]. However, between all this I was able to come up with fairly simple workaround, which I'll post as an alternate answer. – Lacielacing

Answer 2

With PrimeFaces 7.0, I have devised a fairly simple workaround. (This may also work with earlier PrimeFaces versions - haven't tested them.)

Simply enable AJAX on the checkbox and have it update the dataTable:

(Note that I use p:selectBooleanCheckbox; also note that the update="<datatable id>" is required for this to work - you can't just insert <p:ajax />)

  <f:facet name="input">
    <p:selectBooleanCheckbox value="#{submodel.mapping}" style="width:96%" 
       label="Root model">
      <p:ajax update="submodels" />
    </p:selectBooleanCheckbox>
  </f:facet>

Lacielacing

Answer 3

This has been fixed for PF 7.1 see this PR: https://github.com/primefaces/primefaces/pull/5095

Sherrard