jqGrid: Is it possible to commit a cell change when tabbing off instead of pressing Enter?

Question

I have a simple in-line edit in my grid, and I want to commit the change when the user tabs off the textbox. The default behavior of jqGrid forces the user to press 'Enter' to commit the change, but this is non-intuitive for our users.

    onSelectRow: function(id) {
         $(gridCoreGroups).editRow(id, true, undefined, function(response) 
         {
              alert("hello world");
         }
    }

I've worked my way through the events provided, but they all happen as a result of the user pressing 'Enter', which I want to avoid. Is there something I can wire up that would trigger an action when the user tabs off this cell?

Raggletaggle

Answer 1

My solution was to use basic jQuery selectors and events independently of the grid to detect this event. I use the live and blur events on the textboxes in the grid to capture the event. The two events are not supported in combination with each other, so this hack ended up being the solution:

Simulating "focus" and "blur" in jQuery .live() method

Raggletaggle

Answer 2

For in line editing you can accomplished this several ways. To bind an onblur event to the input field using the onSelectRow trigger, eliminating the need for edit and save buttons, do something like this:

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

To apply a jQuery live event handler to all inputs that may appear within a row (jqGrid labels all inputs as rowId_fieldName ), loop throw the number of rows in your grid and do something like this:

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

Note: To use blur with .live() like above, you'll need jQuery 1.4 or the patch located at: Simulating "focus" and "blur" in jQuery .live() method

Be careful with rowIds. When you get into sorting, adding and removing of rows, you may find yourself writing some tricky jQuery to convert row ids to iRows or row numbers.

If you're like me and you went with individual cell edit, you'll want to modify the afterEditCell trigger with something like:

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

Hope that helps..

Ardennes

Nice example @Jon still it has issues if the cell is a date with a datepicker and does not get the field chosen in the picker and gives a Javascript error – Billfold

In the last example, '#uploadTable' should be '#gridId'? – Hawse

Correct. Thanks @morgar. Fixed. – Ardennes

There is still another '#uploadTable' in the example ;) – Hawse

Answer 3

This is pretty horrible, but its my take on this problem, and is prob a bit easier and more generic - it presses enter programmatically when the item loses focus :)

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

Add that code to your jqgrid setup code.

It assumes that the last edited item is the only thing with .edit-cell as a parent td.

Sashenka

It may not be pretty - but it is generic - and it works for both text and dropdowns within the same row. Thanks for generously providing your answer. – Flounder

Answer 4

I know this question is old however the answer is outdated.

A global variable called lastsel must be created and the following added to the jqGrid code

 onSelectRow: function (id) {
            if (!status)//deselected
            {
                if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
                    jQuery('#list1').jqGrid('saveRow', lastsel);
            }
            if (id && id !== lastsel) {
                jQuery('#list1').jqGrid('restoreRow', lastsel);
                jQuery('#list1').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },

Neurotomy

Answer 5

I had the same issue and tried the answers above. In the end I went with a solution that inserts an "Enter" key press when the user is leaving the tab.

// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
//   not been finished.  Complete the edit by injecting an "Enter" key press
function saveEdits() {
    var $input = $("#grid").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}

Did

Answer 6

Instead of using selectRow use CellSelect.

onCellSelect: function (row, col, content, event) {
    if (row != lastsel) {
            grid.jqGrid('saveRow', lastsel);
            lastsel = row;
        }           
        var cm = grid.jqGrid("getGridParam", "colModel");
        //keep it false bcoz i am calling an event on the enter keypress
        grid.jqGrid('editRow', row, false);

        var fieldName = cm[col].name;
        //If input tag becomes blur then function called.
          $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
        });

       //Enter key press event.
       $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            //If enter key pressed then save particular row and validate.
            if( code == 13 ){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
            }
        });
    }

//saveDataFromTable() is the function which validates my data.

Susa