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

Honour

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

Honour

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

Shipshape

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

@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? – Shipshape

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" – Mackey

@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 */} } } ] } – Shipshape

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

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

Juryrig

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

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

Cadal

Answer 5

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.

Swann

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 – Honour

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. – Swann

Answer 6

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

Pozzuoli