jqGrid custom onCellSelect not firing beforeSaveCell

Question

I am writing some piece of code inside onCellSelect, which executes fine

onCellSelect: function (rowid, iCol, cellcontent) {
        if (iCol > 0) {
            $("#gridMain_d").jqGrid("resetSelection");
            $("#gridMain_d").setSelection(rowid, true);
        }
    }

But the problem is because of this code beforeSaveCell event is not firing. I know this because as soon as I remove this code beforeSaveCell starts working. i have tried using return statement but nothing works.

UPDATE
I commented the code written above and added this code

beforeSelectRow: function (rowid, e) {
        var $self = $(this), iCol, cm,
            $td = $(e.target).closest("tr.jqgrow>td"),
            $tr = $td.closest("tr.jqgrow"),
            p = $self.jqGrid("getGridParam");

        if ($(e.target).is("input[type=checkbox]") && $td.length > 0) {
            $self.jqGrid("setSelection", $tr.attr("id"), true, e);
        }
        else {
            $self.jqGrid('resetSelection');
            $self.jqGrid("setSelection", $tr.attr("id"), true, e);
        }
        return true;
    },

But still beforeSaveCell event is not firing.

UPDATE 2
This jsFiddle replicates the issue. http://jsfiddle.net/eranjali08/CzVVK/1175/

Answer 1

There are many callbacks which depends from each other. Moreover it could be difference of such dependencies in different versions of jqGrid. I recommend you to use beforeSelectRow instead of onCellSelect because it will be the first callback which will be called on click on the cell of jqGrid. All information which you could need you can get from the second parameter (e in the code below) of beforeSelectRow:

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        $td = $(e.target).closest("tr.jqgrow>td");
        iCol = $.jgrid.getCellIndex($(e.target).closest($td[0]),
        colModel = $self.jqGrid("getGridParam", "colModel"),
        columnName = colModel[i].name;
    //...
    // one can use here $td.html(), $td.text() to access the content of the cell
    // columnName is the name of the column which cell was clicked
    // iCol - the index of the column which cell was clicked
    return true; // or false to suppress the selection
}

You need just don't forget that beforeSelectRow should return the value which inform jqGrid whether to select the clicked row or not. The values false or "stop" returned from beforeSelectRow suppresses the selection of the clicked row. All other values allows the selection.

UPDATED: I analysed your code one more time and I hope I've found the reason of your problem. You use resetSelection which is evil in case of usage of cell editing. Look at the last line of resetSelection.

t.p.savedRow = [];

It destroys the array holding the information about the currently editing cell. So the cell can't be saved or restored more.

To solve the problem you have to remove resetSelection from your code. If you really need to use resetSelection you should replace it for example to the loop with call of setSelection. The corresponding code could look close to the code below:

beforeSelectRow: function (rowid, e) {
    var $self = $(this), iCol, cm, i, idsOfSelectedRows,
        $td = $(e.target).closest("tr.jqgrow>td"),
        $tr = $td.closest("tr.jqgrow"),
        p = $self.jqGrid("getGridParam");

    if ($(e.target).is("input[type=checkbox]") && $td.length > 0) {
        $self.jqGrid("setSelection", $tr.attr("id"), true, e);
    }
    else {
        //$self.jqGrid('resetSelection');
        idsOfSelectedRows = p.selarrrow.slice(0); // make copy of the array
        for (i = 0; i < idsOfSelectedRows.length; i++) {
            $self.jqGrid("setSelection", idsOfSelectedRows[i], false, e);
        }
        $self.jqGrid("setSelection", rowid, false, e);
    }
    return false;
},