jqgrid : Inline checkbox editing in Client Side

Question

I am using jqgrid. I want to allow people to use a checkbox in inline editing. There will not be any buttons like edit etc, As soon as he clicks the checkbox, it should be considered as committed on client side.

There is a checkbox which I want to always keep in edit mode. After user is done making changes, he will click on a submit button & full grid data will get posted to the server.

I expect that getGridParam method should give me the updated cell values. However it is not doing so.

I feel my problem is the onSelectRow method. somewhere I am missing the implementation to save the current row state. & hence in the getGridParam method. I am getting the original values.

Code :

var lastsel;

 jQuery("#AcOpenDataGrid").jqGrid({
                    url: '/Admin/Role/GetMappedMenus',
                    viewrecords: true, sortname: 'Code', sortorder: "desc",
                    colNames: [
                    "Code",
                    "MenuName",
                    "Allow"
                    ],
                    colModel: [
                     { name: 'Code', width: 10, key: true, align: 'center', hidden: true },
                     { name: 'MenuName', index: 'MenuName', width: 60, search: true, searchoptions: JQ_sopt_string, align: 'left' },
                     { name: 'Allow', index: 'Allow', width: 30, editable: true,edittype:'checkbox',editoptions: { value:"True:False" },formatter:'checkbox', formatoptions: {disabled : false}  ,search: true, searchoptions: JQ_sopt_string, align: 'center' },
                    ],
                    height: '500',
                    autowidth: true,
                    rowList: JQ_Paging_Opt,
                    rowNum: JQ_RowNum_Opt,
                    pager: pager_selector,
                    datatype: 'json', mtype: 'GET',
                    cmTemplate: { title: false },
                    loadonce:true,
                    altRows: true,
                    jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "userdata", id: "Code" },
                    editurl: 'clientArray',
                    onSelectRow: function (id) {
                        if (id && id !== lastsel) {
                            jQuery(grid_selector).jqGrid('restoreRow', lastsel);
                            //jQuery(grid_selector).jqGrid('saveRow', lastsel);
                            jQuery(grid_selector).jqGrid('editRow', id, true);
                            lastsel = id;
                        }
                    },

                }).navGrid(pager_selector, { view: false, del: false, add: false, edit: false, search: false, refresh: true }
                 ).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
            });


  $(".submit").click(function () {
                var localGridData = $("#AcOpenDataGrid").jqGrid('getGridParam', 'data');
                //To Do : Post Ajax here. 
         });

Answer 1

I found a solution here. Not exactly what I expected but it does serves my purpose.

Make a column be a checkbox

 beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "closed") {
            localData.closed = $(e.target).is(":checked");
        }

        return true; // allow selection
    },