Question

I have a jqGrid with only certain columns that are editable and I would like to be able to implement functionality similar to excel when you press tab and enter. These columns are editable from the start, because I call editRow on every row in loadComplete, so that the user may click in any one of the cells in these columns and change the information. I would like it to be such that when you press tab the cursor goes to the next editable cell in the current row until it gets to the end and upon pressing tab again, goes to the first editable cell of the next row; and upon pressing enter goes to the first editable cell of the next row no matter what cell you happen to be in of the previous row. Every time cell focus is changed, data is saved to the server.

I’ve been doing quite a bit of research, but none of it has worked. I have the functionality for each keypress in the colModel under editoptions and dataEvents as a keydown event that checks to see which button has been pressed and then executes the appropriate code. The first thing I tried used the editCell method of jqGrid where I passed it the row and column of the next cell I would like to move the cursor to, but that didn’t work and I think it is because I’ve already called editRow on every row. I’ve also tried changing the focus to the cell I’m trying to go to by using $.click() or $.focus() but that has not worked either.

Something extra to note is that when these columns are blurred, I recompute the column totals on the client side. I have tried putting the different things I’ve tried to change focus inside setTimeout but that hasn’t worked either.

I basically would like to keep it where all of the cells in the columns that I want to be editable are editable at any time and the user may either click on that specific cell or tab/enter over to it to edit it. This is how it looks for clarification:

http://cl.ly/2W3E1U3i1k3K0W2Y0r0n

Thanks for the help!

Answer 1

I was able to figure it out and I’m not sure why it took me so long to figure out. Nothing that jqgrid provided worked and I had tried many different things from jQuery and I finally found something that works:

{
    type: 'keydown',
    fn: function(e) {
        var key = e.charCode || e.keyCode;
        //TAB
        if(key == jq.ui.keyCode.TAB) {
             setTimeout(function() { 
               jq('#' + currentRowId + '_nextColName').focus();
               jq('#' + currentRowId + '_nextColName').select(); 
             }, 500);
        }
        //ENTER
        else if (key == jq.ui.keyCode.ENTER) {
             var nextRow = parseInt(currentRowId) + 1;
             jq('#' + currentRowId + '_thisColName').blur();
             jq('#' + nextRow + '_firstColName').select();
        }
    }
}

This makes it so that tab takes you to the next column and enter always takes you to the first column of the next row while maintaining that all of the cells are always editable and you can click on any editable cell at any time.