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

Solution 1

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.

Solution 2

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.

Solution 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);
    }
});

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

View more solutions

Comments

[laurenceputra]

uh, I dun quite understand what you mean. i can do inline editing already. what i want to do is that when i click outside the grid, it will call the restore row function

[Patton]

ya I know that you were doing inline editing.The thing here is that instead of capturing blur event,try to save the row you have selected for editing.According to the code I have written at any point of time I have a row id that was opened for editing.My suggestion here is that before you perform any other operations related to the grid save the row you have opened for editing and go ahead with your other operations.BTW I have used saveRow() for my requirement you can use restoreRow() for you requirement.

[Hardik Mishra]

Any Idea how to capture restore row event on enter key press.

[ahpoblete]

@HardikMishra I don't quite understand the question. Do you want to intercept the restoreRow event after the enter keypress? Or do you want to trigger the restoreRow event on enter keypress?

[Hardik Mishra]

I want to save edited data on enter key press. But I am not using 'saveRow'. So, Actually I need to capture callback of "editRow"

[ahpoblete]

@HardikMishra What do you mean by "capture"? Is it overwrite? Or trigger? Or prevent from firing? Maybe adding this to your colModel is what you are looking for: editoptions: { dataEvents: [ { type: 'keypress', fn: function(e) { if ((e.keyCode || e.which) == 13) {/* your code here */} } } ] }

[Dave Stein]

For inline edit the onSelectRow event can be used, but if setSelection is used, e is undefined.

[purushothaman poovai]

size() is now depreciated and not available in recent versions, use length instead. refer. also use length == 0 instead of size() < 1