jqGrid randomly checks checkbox column

Question

I am using jqGrid for converting Json object into regular HTML table. From server I get object and everything is good except one thing. I have added one column that is actually checkbox column. In value attribute of each checkbox input I've put ID that later I am passing back to server if checkbox is checked.

$("#membersGrid").jqGrid({
    url: '/Member/GetAllMembers',
    mtype: "GET",
    styleUI: 'Bootstrap',
    datatype: "json",
    colModel: [
        { label: 'Full Name', name: 'fullName', width: 150 },
        {
            label: 'Select', editable: true, name: 'id',
            edittype: 'checkbox', editoptions: { value: "true:false", defaultValue: "false" },
            formatter: "checkbox", formatoptions: { disabled: false }, width: 45
        }
    ],
    viewrecords: true,
    height: 250,
    width: 640,
    rowNum: -1,
    ajaxSubgridOptions: { async: false },
});

When generating checkbox column for value I am defining true or false and with defaultValue I wanted to state that false(unchecked) is default value for each and every generated cell with checkbox.

But instead I am getting randomly checked check-boxes:

When I inspect element in Chrome, unchecked type is auto generated in this way:

<td role="gridcell" style="" title="" aria-describedby="membersGrid_id">
     <input type="checkbox" value="400" offval="no">
</td>

And checked type like this:

<td role="gridcell" style="" title="" aria-describedby="membersGrid_id">
    <input type="checkbox" checked="checked" value="399" offval="no">
</td>

Is there some other way to tell jqGrid to avoid checking checkboxes reather that using defaultValue attribute? Or I am doing something wrongly?

It seems that you use commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334). I can't help you with it, but I recommend you to try with [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork, which I develop. You need to change `styleUI: 'Bootstrap'` parameter to `guiStyle: "bootstrap"` (or `guiStyle: "bootstrapPrimary"`) (see [the article](https://free-jqgrid.github.io/getting-started/index.html#bootstrap)) and to modify the URLs used to load jqGrid files to URLs of CDN (see [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)) — Oleg, Mar 08 '17 at 14:23
If the same problem exists in free jqGrid 4.14.0, then I would need test JSON data returned from the server (`'/Member/GetAllMembers'`) to be able to reproduce the problem. — Oleg, Mar 08 '17 at 14:24
@Oleg Thanks for responding. I have noticed one interesting fact. When I remove name: 'id' attribute that basically defines value attribute of checkboxes, all checkboxes are unchecked. When I return it back it randomly checked again. I'm not sure how name attribute affects if checkbox is checked... — nemo_87, Mar 08 '17 at 14:37

score 1 · Accepted Answer · edited May 23 '17 at 11:53

I think that there are exist misunderstanding about the usage of formatter: "checkbox". It displays the input values true or false as checked/unchecked state of the checkbox. The property id of input data will be used as the rowid: the value of id attribute of the rows (<tr> elements of the grid).

Thus I recommend you to change the name or the column, which will hold the checkboxs. Your main problem should be fixed in the way.

I'd recommend you to be careful with the usage of formatter: "checkbox", formatoptions: { disabled: false }. jqGrid supports three editing modes: cell editing, inline editing and form editing, which allows to modify the local data of jqGrid. Moreover you don't use loadonce: true option currently. Thus no local data will be created at all: only the data in the HTML table will hold the information returned from the server. The changes of the checkbox formatter: "checkbox", formatoptions: { disabled: false } will be not tracked and you could have problems with reading the data. All depend on how you read the data of the checkboxes... The demo, which I created for the answer, shows how to modify local data of jqGrid so to save the state of the checkbox.

jqGrid randomly checks checkbox column

1 Answers1