jqGrid: replace single click with double click to enter cell edit mode

Question

Using cell edit mode in jqGrid, the default behaviour is to enter edit mode on a cell whenever that cell is clicked or if that cell is selected and the enter key is pressed.

Is there a way to change this behaviour so that a single click does not place it in edit mode but a double click does? Entering into edit mode on enter is fine.

Recurved

Answer 1

Directly it is not supported by the cell editing mode, but it seems to me, that you can implement it yourself in the same way as for inline editing (see jqGrid - edit only certain rows for an editable column, for example). You should don't set cellEdit parameter of jqGrid to true, but use directly cell editing methods like editCell described in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing#methods.

Another way is to use inline editing on double-click instead of cell editing.

Unfamiliar

Hi @Oleg, If I set cellEdit: false, then those cell editing methods like editCell don't work. So if one wants cell editing, but enabled on double-click (instead of row editing), then I guess it does not seem to be possible. – Kilkenny

@rsmoorthy: You are right. The usage of double-click for the cell editing is not so easy. Either one have to write much more code or just use inline editing instead of the cell editing. – Unfamiliar

Answer 2

First let me thank you in reading your responses I was able to come up with this solution. I needed some specific behavior for cell editing. I needed to be able to select only a single row with a click. No multi select. I needed cell editing that was activated upon a double click. I needed to be able to cancel an edit if a row other than the one selected was clicked. I also needed to be able to restrict user input. My initial google searches brought me here, and I had just about given up hope when I stumbled across other items you had posted.

Here is the solution that I came up with. Most of it was from your previous answers. I made some changes. So most of this credit goes to you but I wanted to post it here to help others. This is my first time posting a solution so I hope it is clear and helps.

edit.iCol. edit.iRow and edit.rowID are stored so that we can do a cancel on the edit. User your own variables here to store these values.

        cellEdit: true,
        cellsubmit: 'clientArray',
        beforeSelectRow: function(rowid) {
           if (edit.iRow != null && rowid !== edit.rowID) {
               $('#list').jqGrid("restoreCell",edit.iRow, edit.iCol);
               edit.iRow = edit.iCol = null;
             }
           $('#list').jqGrid('setSelection', rowid); 
        },

        afterSaveCell: function (rowid, name, val, iRow, iCol) {        
              alert("after");
        },
        beforeSaveCell: function (rowid, name, val, iRow, iCol) {
             alert("before");
        },
        ondblClickRow: function (rowid, iRow,iCol) {
            edit.iRow = iRow; 
            edit.iCol = iCol; 
            edit.rowID = rowid;
            $("#list").editCell(iRow, iCol, true);
        }

Unstoppable