Jgrid Save cell on button click

Question

HI, I am using afterSaveCell that fires if we modifies the cell then it get fires.

My scenario is that i m doing batch update to the database on save change button. But when user edit the cell and got to the other cell then i log the modification in a array.

But if user edit the cell and click on the Save Change button the cell focus not get lost (Still in edit mode) and afterSaveCell not get fired.

IS there any way to fire the Save the cell on buttojn click so that afterSaveCell get fires.

Please, Help.. Thanks..

Answer 1

You can call saveCell method. This method has iRow and iCol as a parameters. To know the this parameters for the current editable cell you can add afterEditCell to the grid. So you save last values of iRow and iCol in a variable outside of jqGrid and use there inside of on click event on "Save Change" button where you call saveCell with these parameters.

Answer 2

// This worked Perfectly fine for me, hope will work for you as well.
var selectedCellId;
    var $gridTableObj = $('#jqGridTable');
    $gridTableObj.jqGrid({
        datatype : "jsonstring",
        datastr : gridJSON,
        height : ($(window).height() - 110),
        width : ($(window).width() - 80),
        gridview : true,
        loadonce : false,
        colNames : columnNames,
        colModel : columnModel,
        rowNum : gridJSON.length,
        viewrecords : true,
        subGrid : false,
        autoheight : true,
        autowidth : false,
        shrinkToFit : true,
        cellsubmit : 'clientArray',
        cellEdit : true,
        jsonReader : {
            root : "rows",
            repeatitems : false
        },
        onCellSelect : function(id, cellidx, cellvalue) { // use this event to capture edited cellID
            selectedCellId = cellidx; // save the cellId to a variable
        },
        loadComplete : function(data) {
            jQuery("tr.jqgrow:odd").addClass("oddRow");
            jQuery("tr.jqgrow:even").addClass("evenRow");
        }
    });

// Attach on click event jqgrid "saveCell" to save the cell.

var gridCellWasClicked = false;
window.parent.document.body.onclick = saveEditedCell; // attach to parent window if any
document.body.onclick = saveEditedCell; // attach to current document.
function saveEditedCell(evt) {
    var target = $(evt.target);
    var isCellClicked = $gridTableObj.find(target).length; // check if click is inside jqgrid
    if(gridCellWasClicked && !isCellClicked) // check if a valid click
        {
        var rowid = $gridTableObj.jqGrid('getGridParam', 'selrow');
    $gridTableObj.jqGrid("saveCell", rowid, selectedCellId);
    gridCellWasClicked = false;
    }
    if(isCellClicked){
        gridCellWasClicked = true; // flat to check if there is a cell been edited.
    }
};