jqGrid checkbox not saving

Question

I have jqGrid with a column that contains a checkbox. I've noticed that when the user toggles the checkbox, jqGrid doesn't actually put the row into edit mode. So when the user clicks the save button the new value of the checkbox is not saved.

Is this the default behavior for checkboxes in jgGrid? What't the best way to make jqGrid saved the checkbox value?

Here is the jqGrid code:

var myGrid = jQuery("#myGrid");

myGrid.jqGrid({
    editurl: 'UpdateData',
    datatype: function (postdata) {
        //some code
    },
    height: "450",
    footerrow: false,
    userDataOnFooter: false,
    autowidth: true,
    viewrecords: true,
    rowNum: 100,
    rowList: [25, 50, 100, 200, 300, 400, 500, 1000],
    sortname: 'SomeId',
    pager: '#footer',
    caption: "",
    colNames: ['Field1', 'Field2'],
    colModel: [
        { name: 'Col1', index: 'Col1', hidden: false, editable: true, sortable: true, search: true },
        { name: 'MyCheckBox', index: 'MyCheckBox', hidden: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false }, search: true }
    ],
    onSelectRow: function (index) {
        myGrid.jqGrid('editRow', index, true);
    }
});

myGrid.jqGrid('navGrid', '#footer',
    { edit: false, add: false, del: false, search: false },
    { closeAfterAdd: true }, // use default settings for edit
    { closeAfterAdd: true, left: ((document.body.clientWidth / 2) - 100), top: ((document.body.clientHeight / 2) - 50) }, // use default settings for add
    { },  // delete instead that del:false we need this
    { multipleSearch: false }, // enable the advanced searching
    { closeOnEscape: true} /* allow the view dialog to be closed when user press ESC key*/
);

myGrid.jqGrid('navButtonAdd', '#footer',
{
    buttonicon: "none",
    caption: "Save",
    onClickButton: function () {
        //save the currently selected row
    }
})

I was thinking about using jQuery to attach a "change" handler to each checkbox that would put that row into edit mode when the user clicked the checkbox. Seems like a hack though and I wasn't sure how to properly identify the checkbox column in the grid (my example only shows one checkbox but the grid actually has two).

Does jqGrid support better checkbox behavior than this?

Answer 1

It seems to me that you understand yourself now that your initial assumption that formatter: "checkbox" uses inline editing, if it was initialized with the option formatoptions: { disabled: false }, is wrong. jqGrid supports tree independent editing modes: cell editing, inline editing and form editing.

Formatting is just the form to display values of input data. One can, for example, display 0 and 1 (or true and false) values as Yes and No or as checked button or unchecked or as two different images or as cells in green and red or ... So the goal of formatter is constructing HTML fragments which will be placed in cells of the corresponding column.

Specially in case of usage formatter: "checkbox", formatoptions: { disabled: false } one should implement click handle which will makes some additional action, which you need, in case of changing the state of the checkbox. The best implementation of such behavior in my opinion can be written using beforeSelectRow callback. The demo created for the answer shows what can be done in case of usage datatype: "local". In the case there are internal parameters _index and data which holds the data. If you use another datatype value you have many implementation options. You can do for example almost the same, but save changed states of checkboxes in your custom array or object. I recommend you to read the answer and this one for additional information.

Some common remarks about the code which you posted. I strictly recommend you to avoid usage of datatype defined as function if you use jQuery.ajax internally. It's topically an origin of errors. jqGrid provides a lot of options which allows you to customize jQuery.ajax which makes jqGrid itself in case of usage datatype: "json" or datatype: "xml". There are beforeProcessing callback, ajaxGridOptions option, jsonReader which can use functions (see here), jsonmap property in colModel, which can be functions too and so on. I recommend you to use the features instead.

Additionally I would recommend you to add gridview: true (see here) and autoencode: true option in the grid and remove unneeded index properties from colModel and properties with default values hidden: false, sortable: true, search: true. It is strictly recommended to fill id (rowid) in the input data or use key: true for some column if the column already contains unique id value.