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?

Solution 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

Solution 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..

Solution 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.

Comments

[will824]

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

[sairn]

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.

[morgar]

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

[Jon Weers]

Correct. Thanks @morgar. Fixed.

[morgar]

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