JqGrid sava row data to DB on click out of grid

Question

I have a JQGrid with 3 columns. At the moment i hvae implementet it so that its a fully editable grid (where when you click on a row, its getting edittable). Right now to leave edit mode and save i have to press enter, but what i need is to have possibility to:

When i click out of grid in edit mode to autosave my selected row data to DB, but i still want to keep save on enter click button functionallity.

I dont know if it is possible to achieve so i have both functionallities on 1 grid.

here is the code for jqgrid

  var lastsel;
  jQuery(document).ready(function() {
      jQuery("#list").jqGrid({
              url: '@Url.Action("SellerList")',
              datatype: 'json',
              mtype: 'GET',
              loadonce: true, // to enable sorting on client side
              sortable: true, //to enable sorting
              colNames: ['SellerKey', 'SellerId', 'Navn', 'Email', 'Slet'],
              colModel: [
                  { name: 'id ', index: 'id ', width: 50, key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                  { name: 'SellerId', index: 'SellerId', align: 'center', width: 50, editable: true, editrules: { edithidden: false }, hidden: true },
                  { name: 'Navn', index: 'Navn', width: 200, edittype: 'text', align: 'left', editable: true, sortable: true },
                  { name: 'Email', index: 'Email', width: 300, edittype: 'text', align: 'left', editable: true, sortable: true },
                  { name: 'act', index: 'act', width: 80, align: 'center', sortable: false }],
              loadComplete: function() {
                  jQuery("#list").trigger("reloadGrid"); // Call to fix client-side sorting
              },
              gridComplete: function() {

                  var ids = jQuery("#list").jqGrid('getDataIDs');
                  var gr = jQuery('#list'); gr.setGridHeight('auto', true);
                  for (var i = 0; i < ids.length; i++) {
                      var cl = ids[i];
                     var be = "<a href='#' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',{reloadAfterSubmit:false, url:'@Url.Action("deleteRow")'}); return false;\">Slet </>";
                      jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
                  }
              },

              onSelectRow: function(id) {
                  if (id && id !== lastsel) {
                      jQuery('#list').jqGrid('restoreRow', lastsel);
                      jQuery('#list').jqGrid('editRow', id, true);
                      lastsel = id;
                  }
              },


              editurl: '@Url.Action("GridSave")',
              rowNum: 100,
              rowList: [5, 10, 20, 50],
              viewrecords: true


          });
      var grid = jQuery("#list"); 
        jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false }, { beforeShowForm: function(form) {
              // "editmodlist"
              var dlgDiv = grid.jqGrid("#delmodlist" + grid[0].id);
              var parentDiv = dlgDiv.parent(); // div#gbox_list
              var dlgWidth = dlgDiv.width();
              var parentWidth = parentDiv.width();
              var dlgHeight = dlgDiv.height();
              var parentHeight = parentDiv.height();
              // TODO: change parentWidth and parentHeight in case of the grid
              //       is larger as the browser window
              dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
              dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
          }});
  }); 

Answer 1

I found icats' answer useful but it does not work in all situations as well.

I would suggest to bind to $('html') rather than to $('body'). Body may occupy not all visible space in your browser.

Answer 2

To save the current editing row if you click on another row of the grid you need just to use saveRow instead of restoreRow inside of onSelectRow event handler:

onSelectRow: function (rowid) {
    if (rowid !== lastSel) {
        grid.jqGrid('saveRow', lastSel);
        lastSel = rowid;
    }
    grid.jqGrid('editRow', rowid, true);
    return true;
}

To save the row if you click somewhere outside of the grid I don't found any good solution. For example in IE9 the following code work good:

grid.focusout(function (e) {
    if (e.relatedTarget) {
        var $related = grid.find(e.relatedTarget);
        if ($related.length <= 0 && lastSel) {
            grid.jqGrid('saveRow', lastSel);
        }
    }
});

where var grid = jQuery("#list"); See the demo here. The same code not work in other web browsers. For IE8/IE7 e.pageX and e.pageY will be set in focusout (but not in IE9), so the properties can be used to calculate the mouse position and determine whether the position outside of the grid.

So I can't suggest you any good way to save the editing row on click outside of the grid.