Stop jqGrid row being 'selected' when clicked, while still preserving editing

Question

I have a jqGrid with three columns. One of the columns is set up for cell editing, like so:

$('#myGrid').jqGrid({
    ...
    editUrl: 'clientArray',
    cellEdit: true,
    cellsubmit: 'clientArray',
    colModel: [
        {name: 'Col1'},
        {name: 'Col2'},
        {
             name: 'Col3',
             editable: true,
             editrules: {required: true, number: true}
         }
    ]
});

When the user clicks on a cell in the third column then the editor automatically appears. However, when the user clicks on a row, that row also becomes highlighted ('selected'). Is it possible to disable this highlighting whilst still allowing the cell editor to be displayed if the user clicks on a cell in the editable column?

I've tried

$('#myGrid').jqGrid({
    ...
    beforeSelectRow: function() { return false; }
})

...but this disables editing as well as the selecting of a row.

Answer 1

You posted no code which would show how you implemented inline editing. There many different implementation which uses inline editing. The most typical are

• start editing on row select, saving by pressing Enter, selection of another line follows discarding of changes in previous non-saved row
• start editing on row select, saving by pressing Enter, selection of another line follows silent saving of changes in previous non-saved row
• start editing on double-click on the row, saving by pressing Enter, selection of another line follows discarding of changes in previous non-saved row
• start editing on double-click on the row, saving by pressing Enter, selection of another line follows silent saving of changes in previous non-saved row
• usage of additional column having formatter: "actions"
• usage of inlineNav method
• ...

If you use for example the first version of the above list and you don't want to have any row selection you can move the code from onSelectRow to beforeSelectRow.

The demo demonstrate one from the possible implementations:

beforeSelectRow: function (rowid) {
    var $this = $(this),
        editingRowId = $this.jqGrid("getGridParam", "editingRowId"),
        setEditingRowId = function (newId) {
            $this.jqGrid("setGridParam", {editingRowId: newId});
        };

    if (rowid !== editingRowId) {
        if (editingRowId !== undefined) {
            $this.jqGrid("restoreRow", editingRowId);
        }
        $this.jqGrid("editRow", rowid, {
            keys: true,
            oneditfunc: function (id) {
                setEditingRowId(id);
            },
            aftersavefunc: function () {
                setEditingRowId();
            },
            afterrestorefunc: function () {
                setEditingRowId();
            }
        });
    }

    return false;
}

UPDATED: The corresponding implementation is more difficult if you want to use cell editing mode. Nevertheless it's possible you should follows mostly the ideas from the answer. The demo demonstrate the part of the code which you need. It don't use any keyboard binding.

beforeSelectRow: function (rowid, e) {
    var $this = $(this),
        $td = $(e.target).closest("td"),
        $tr = $td.closest("tr.jqgrow"),
        iRow, iCol;

    if ($tr.length > 0) {
        iRow = $tr[0].rowIndex;
        iCol = $.jgrid.getCellIndex($td[0]);
        $this.jqGrid('setGridParam', {cellEdit: true});
        $this.jqGrid('editCell', iRow, iCol, true);
        $this.jqGrid('setGridParam', {cellEdit: false});
    }

    return false;
}