jqGrid - Unable to de-select a row when in inline edit mode

Question

I am currently using free-jqGrid v4.15.5. I'm implementing inline editing with multiselect:true, and am unable to unselect a row (either by clicking the row or un-checking the checkbox in the first column).

What I ideally want to do is allow the user to select a row, make some changes in the row, then update the local grid with the new changes when they leave the row they were last working on.

My code so far:

           let $lastRowId = 0;
    
           $("#list").jqGrid({
                url: './jqGridHandler.ashx/GetList?s=' + $('#txtSearch').val(),
                datatype: 'json',
                mtype: 'post',
                postData: { searchString: $('#txtSearch').val() },
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

                colNames: ["Mugshot", "Resident ID", "Resident Name", "Date of Birth", "Tested", "Refused", "Refusal Reason", "Refusal Date"],
                colModel: [
                    {
                        name: "mugshot", align: "center", width: 92, align: "center",
                        formatter: function (cellvalue, options, rowobject) {
                            let imgHtml = '<img src="' + cellvalue + '" class="mgShot" />';
                            let img = '<a data-toggle="popover-hover" data-img="' + cellvalue + '">' + imgHtml + '</a>';

                            return img;
                        }
                    },
                    { name: "residentID", width: 75, editable: "hidden", align: "center" },
                    { name: "residentName", editable: "hidden", align: "center" },
                    { name: "dob", align: "center", sorttype: "date", frozen: true, editable: "hidden" },
                    { name: "tested", width: 75, template: "booleanCheckboxFa", align: "center" },
                    { name: "refused", width: 75, template: "booleanCheckboxFa", align: "center" },
                    { name: "refusalReason", id: "refusalReason", width: 115, align: "center", editable: true,
                        formatter: "select", editable: true, edittype: "select", stype: "select",
                        editoptions: { value: "-1:Please Choose;Religious:Religious;Medical:Medical" }
                    },
                    {
                        name: "refusalDate", width: 92, align: "left", sorttype: "date", frozen: true,
                        formatter: "date", formatoptions: { newformat: "d-M-Y" }, datefmt: "d-M-Y",
                        editoptions: { dataInit: initDateEdit },
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
                    },
                ],
                iconSet: "fontAwesome",
                rownumbers: true,
                pager: true,
                rowNum: 10,
                multiselect: true,
                onSelectRow: function (rowID, status, e) {
                    if ( rowID && rowID !== $lastRowId ) {
                        $(this).saveRow( $lastRowId );
                        $lastRowId = rowID;
                    }
                    $grid.jqGrid("editRow", rowID, { focusField: e.target });
                },
                sortorder: '',
                caption: ''
            });

and some test data that comes back from the server:

  "total": 0,
  "page": 0,
  "records": 0,
  "rows": [
    {
      "cell": [
        "",
        "14207",
        "John Doe",
        "8/14/1965 12:00:00 AM",
        "",
        "",
        "",
        ""
      ]
    },
    {
      "cell": [
        "",
        "14208",
        "Jane Doe ",
        "3/3/1978 12:00:00 AM",
        "",
        "",
        "",
        ""
      ]
    }
   ]
  }

I can click the row fine, make changes, and those updates show up in the grid. However, if I then try to un-select the row, nothing happens, it just stays in edit mode and I'm unable to uncheck each rows checkbox. Looking in the console in Chrome, I find no errors.

Been beating my head against the wall on this for the past few days, any help is greatly appreciated!

Answer 1

This is because of the logic in onSelectRow event. As per your logic every time the row is clicked it is edited

$grid.jqGrid("editRow", rowID, { focusField: e.target });

When the row is edited it is selected which causes the problem you describe. To resolve the problem just move the edit within the if statement

onSelectRow: function (rowID, status, e) {
    if ( rowID && rowID !== $lastRowId ) {
        $(this).saveRow( $lastRowId );
        $lastRowId = rowID;
        $grid.jqGrid("editRow", rowID, { focusField: e.target});
    }
},

This will change the logic.

Since free-jqGrid is not supported from 3 years, I'm not sure that is this still valid, but you can try to add multiboxonly to true.

Something like this:

multiselect: true,
multiboxonly : true, 
onSelectRow: function (rowID, status, e) {
    if ( rowID && rowID !== $lastRowId ) {
        $(this).saveRow( $lastRowId );
        $lastRowId = rowID;
        $grid.jqGrid("editRow", rowID, { focusField: e.target});
    }
},

I have tested it and it is working fine in Guriddo jqGrid.

Hint: You can play with the second parameter status, which indicates if the row is selected or not