jqGrid: how to lose focus when i click outside the grid, or anywhere else for that matter

laurenceputra picture laurenceputra · Mar 22, 2011 · Viewed 17.3k times · Source

i'm currently doing editing using inline editing, and when i click outside the grid, it's still being under edit. what event handlers should i use to make it call the restore row function, such that the only way for data to actually sent to the server is if the user presses enter.

thx in advance

Answer

ahpoblete picture ahpoblete · Nov 23, 2012

I don't know exactly how you are triggering the inline edition. I use the ondblClickRow event of the jqGrid, and was also looking for a way to restore the row when the user left the input or select (edit) element.

I find it cumbersome to keep track of the last selected element, and checking for it on every click on other elements. So, I think a more convenient way is to attach the restoreRow trigger to the blur event of the input or select element currently being edited, as so:

ondblClickRow: function(rowid, iRow, iCol, e) {
  grid.jqGrid('editRow', rowid, true);
  $("input, select", e.target).focus().blur(function() {
    grid.jqGrid('restoreRow', rowid);
  });
  return;
}

This way, the row is restored whenever the user leaves the edition field without pressing enter.

This approach works great for me, hope it helps someone else too.