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.

score 1 · Answer 1 · edited May 23 '17 at 11:45

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;
}

Apologies if I wasn't clear enough. I have about three columns but only one of them is editable. I will update the question to reflect this. — FixMaker, Nov 21 '12 at 19:07
@Lorax: You wrote "inline editing", but your code shows that you use `cellEdit: true`. It is **cell editing**. jqGrid support three [editing modes](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs#editing). All works in *absolutely another way*. If you use cell editing then you ask now absolutely new question. One can implement the behavior which you need but you have to remove `cellEdit: true` and call `editCell` *manually* inside of `beforeSelectRow` callback. I hope that the code from [the answer](http://stackoverflow.com/a/9513549/315935) will help you to implement this. — Oleg, Nov 21 '12 at 19:38
Thanks for the clarification on my misunderstanding of the jargon. I'm only just starting to use jqGrid and find the documentation hard to navigate sometimes. I'll delete the reference to "inline editing". Is there any way that I can call `editCell` manually *only if the user clicks on that cell in the row*? — FixMaker, Nov 22 '12 at 11:49
Oleg, your solution is great, however I see a problem because "enter" or "escape" does not allow us to exit from the output. Would you have a solution for that? — user2360915, Feb 14 '16 at 13:31
@user2360915: Sorry, but the answer is really very old. I develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork since the end of 2014. I made a lot of small changes in the code, fixed many bugs and implemented many new features. The default behavior of cell editing in free jqGrid: don't select the row on cell editing. If it's do required then one can do this by call of `setSelection` inside of `beforeEditCell` callback. In other words you don't need to do nothing if you use URLs described [here](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs). — Oleg, Feb 14 '16 at 14:17

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

1 Answers1