Losing edited cell data after paging

Question

Hi,

I'm building a completely "client side" grid however if I enable inline editing, the changes I make are lost if I change the grid page.

Hopefully someone can point out what I'm missing

The Grid setup is shown below along with the function I call to fill it with test data:

var myGrid;
var lastgridsel;
jQuery(document).ready(function() {
    myGrid = jQuery("#mygrid").jqGrid({
        datatype: 'local',
        colModel: [
            { name: 'AID', label: 'AID', index: 'AID', width: 100, editable: false,
              sorttype: "int" },
            { name: 'MS', label: 'MS', index: 'MS', width: 300, editable: false },
            { name: 'GROUP', label: 'GROUP', index: 'GROUP', width: 100,
              editable: false },
            { name: 'REV', label: 'REV', index: 'REV', width: 100,
              editable: false },
            { name: 'OPT', label: 'OPT', index: 'OPT', width: 100, editable: true,
              edittype: 'text' }
        ],
        pager: '#mypager',
        rowNum: 10,
        rowList: [10, 20, 500],
        viewrecords: true,
        loadonce: true,
        autowidth: true,
        sortname: 'AID',
        sortorder: 'desc',
        cellsubmit: 'clientArray',
        onSelectRow: function(id) {
            if (id && id !== lastgridsel) {
                jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray');
                jQuery('#mygrid').editRow(id, true);
                lastgridsel = id;
            }
        }
    });
});

var mydata = [];
function InitNew() {
    for (var i = 0; i < 100; i++) {
        mydata.push({ AID: i, MS: "123", GROUP: "456", REV: "78", OPT: "8" });
    }
    myGrid.setGridParam({ data: mydata }).trigger("reloadGrid");
}

This shows 10 pages, 100 records. If I click the "OPT" column, I can change the value in the textbox and when I click another row, the data appears to be saved. However, once I go to another page and back to the first page, the data reverts to its original value.

Hope someone can help (FWIW this is an urgent issue – aren't they all? :-) Would really appreciate a hint.

Thanks,

Bill

Answer 1

I am not sure whether it is a bug in the version of 3.7.x or not, but currently if you save local data with respect of inline editing (saveRow or editRow methods) the internal data parameter of jqGrid will be not modified.

To fix the problem you can define function like

var myAfterSave = function(rowid, response) {  // aftersavefunc
    var index = parseInt(rowid, 10);
    var d = myGrid.getGridParam("data");
    var rowdata = myGrid.getRowData(rowid);
    d[rowdata.AID].OPT = rowdata.OPT;
};

and modify the lines

jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray');
jQuery('#mygrid').editRow(id, true);

to the lines

jQuery('#mygrid').saveRow(lastgridsel, false, 'clientArray', null, myAfterSave);
jQuery('#mygrid').editRow(id, true, null, null, 'clientArray', null, myAfterSave);

Answer 2

Oleg - thanks a million. Your answer works really well. I posted the question on the official jqgrid support forum and there is another workaround which could help. Thread is at http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/#p18567.

Summary: If building the grid using pure clientside code, you need to replace

myGrid.setGridParam({ data: mydata }).trigger("reloadGrid");

with

myGrid.setGridParam({ data: mydata });
myGrid[0].refreshIndex();
myGrid.trigger("reloadGrid");