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

score 3 · Answer 1 · answered Nov 23 '12 at 22:22

3

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.

answered Nov 23 '12 at 22:22

ahpoblete

441
8
17

Any Idea how to capture restore row event on enter key press. – Hardik Mishra May 16 '13 at 10:07
@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? – ahpoblete May 16 '13 at 13:53
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" – Hardik Mishra May 17 '13 at 03:21
@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 */} } } ] }` – ahpoblete May 17 '13 at 15:48
For inline edit the onSelectRow event can be used, but if setSelection is used, e is undefined. – Scott Anderson Jan 23 '14 at 19:25

score 3 · Answer 2 · answered Feb 20 '14 at 11:28

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

size() is now depreciated and not available in recent versions, use length instead. [refer](https://api.jquery.com/size/). also use `length == 0` instead of `size() < 1` — purushothaman poovai, Jul 30 '19 at 13:02

score 2 · Accepted Answer · answered Mar 22 '11 at 18:00

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.

morgar · Answer 4 · 2016-08-23T03:17:13.000

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

score 0 · Answer 5 · edited May 23 '17 at 12:06

Im tryed few different variants. Based on Mauricio Reis's code I wrote my own.

var lastSel = -1;

$("#mygrid").jqGrid({
    ...
    beforeSelectRow: function(rowid) {
        if (rowid !== lastSel) {
            lastSel = rowid;
            $("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
        }
        return true;
    },
    onCellSelect: function(rowId,iCol,cellcontent,e) {
        if(iCol == 1 || iCol == 2) // editable columns
            sgrid.jqGrid('editRow', rowId, true);
    },
    ...
});
...
$(document).click(function(e) {
    if(sgrid.has(e.target).size() < 1)
        $("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
});

If you wants to save row instead cancel editing just put

$("#mygrid").jqGrid('saveRow', lastSel); // save row

instead

$("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit

score 0 · Answer 6 · answered Mar 22 '11 at 09:48

Even I faced the same issue while working with inline editing.I have gone for a workaround.I still dont know yet whether it is a right a solution.

When I was editing a row I used some thing of this sort

var lastSel;

// In grid I am using some thing like this for editing
    ondblClickRow: function(rowId, iRow, iCol, e){
//initially I am saving my prev row selected for editing and then editing the selected row.

        if(rowId && rowId!==lastSel){ //lastSel is a global variable
            jQuery(this).saveRow(lastSel); 
            lastSel=rowId; 
         }        
        $(this).jqGrid('resetSelection');   
        $(this).jqGrid('editRow', rowId, true, null, null, 'clientArray');


    }

when I wanted to send the data to server to update I am using the following the statement in my first line and sending then sending the data to the server.

$(gridId).saveRow(lastSel);//where lastSel is the global variable I have selected.

Hope this gives you an idea how to do solve your problem. BTW I have made only one row to be editable at any point of time.

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 — laurenceputra, Mar 22 '11 at 17:31
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. — Patton, Mar 23 '11 at 05:28

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

6 Answers6