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

Question

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 1

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.

Answer 2

Anyway, i've figured out how to do it already. Just thought might be good to leave it somewhere online as I wasted quite a bit of time figuring out how to do it. Hope it helps =)

$(document).click(function(e){
    if(e.target.id != lastSelectRoot+"_FieldName"){
        jQuery('#grid').jqGrid('restoreRow',lastSelectRoot);
        lastSelectRoot = null;
    }
});

Just add this piece of code somewhere and change the appropriate parts, such as FieldName and lastSelectRoot and #grid to what you are already using.

Answer 3

Since the main problem is that you want to lose the focus when you click outside the grid, I wrote this function to unselect the cell just when the grid don't has() the clicked element:

$(document).click(function(e) {
    e.preventDefault();
    //gets the element where the click event happened
    var clickedElement = e.target;      
    //if the click event happened outside the grid 
    if($("#myGridId").has(clickedElement).size() < 1){
        //unselect the grid row
        $("#myGridId").jqGrid("editCell", 0, 0, false);
    }
});

Answer 4

This solution is working for me and looks simpler than the other options. Is generic and doesn't need any global variable.

$(document).on('focusout', '[role="gridcell"] *', function() {
    $("#mygrid").jqGrid('editCell', 0, 0, false);
});

Solutions based on $(document).on('click') have a a potential flaw. Some components like select2 don't propagate the click event to the document, so it will fail if you have it on your page and it's clicked (that was my case).