Search code examples
jqueryjqgridfree-jqgrid

free-jqgrid editing a column with edittype: "checkbox", editoptions.value: "1:0" doesn't work


In free-jqgrid, when editing a column with edittype: "checkbox" and editoptions.value = "1:0", it is impossible to set the field value to 1 if it was previously 0. When you check the field and submit the form, the column remains unchecked.

This worked well in jqGrid.

This strange behavior can be seen in the following JSFiddle example. ( forked from an OlegK's example )

In this example, if you edit and check the inCharge field of a previously unchecked field, after submitting the form, it remains unchecked.
On the other hand, if it was checked, you can either check or uncheck it, and after submitting, it will be as expected.
Moreover, when you add a record, if you check the inCharge field, it remains unchecked after submitting.

Here is the code

$(function() {
  "use strict";
  $("#grid").jqGrid({
      colModel: [{
          name: "id",
          width: 20,
          hidden: true,
          editable: false,
        },
        {
          name: "firstName",
          width: 200,
          editable: true
        },
        {
          name: "lastName",
          width: 200,
          editable: true
        },
        {
          name: "inCharge",
          width: 100,
          editable: true,
          formatter: "checkbox",
          edittype: "checkbox",
          editoptions: {
            value: "1:0"  // doesn't seem to work properly.
          }
        }
      ],
      data: [{
          id: 10,
          firstName: "Angela",
          lastName: "Merkel",
          inCharge: "1"
        },
        {
          id: 20,
          firstName: "Vladimir",
          lastName: "Putin",
          inCharge: "1"

        },
        {
          id: 30,
          firstName: "David",
          lastName: "Cameron",
          inCharge: "1"

        },
        {
          id: 40,
          firstName: "Barack",
          lastName: "Obama",
          inCharge: "0"

        },
        {
          id: 50,
          firstName: "François",
          lastName: "Hollande",
          inCharge: "0"

        }
      ],
      pager: true,
      pgbuttons: false,
      pginput: false,
      viewrecords: true,
      pagerRightWidth: 90
    })
    .jqGrid('navGrid', {
      edittext: 'Edit',
      addtext: 'Add',
      deltext: 'Del',
      search: false,
      view: true,
      viewtext: 'View',
      refresh: true,
      refreshtext: 'Refresh'
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<table id="grid"></table>


Solution

  • The problem, which you describe is a bug in form editing, described in the issue #432. The problem is already fixed in the code on the Git. The demo

    https://jsfiddle.net/OlegKi/dvyo36hw/11/
    

    uses your original code, but

    https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js
    

    instead of

    https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js
    

    One can verify that the problem is fixed.