asp.net mvc - Inline editing in jqGrid not working

Question

I am facing an issue in Inline editing, I have a jqGrid with pager. If the user changes the value of three cells suppose. After editing the third cell the user clicks on the next page button of the jqGrid pager. Now when the user returns back to the first page, only the changed values of the first two cells are retained and the third is lost. Please suggest how to retain the values of all the cells..?

Sample Code:

var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true,
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    rowNum: 10,
    pager: '#pager',
    'cellEdit': true,
    'cellsubmit' : 'clientArray',
    editurl: 'clientArray'
});

Answer 1

It's wrong to use cellEdit: true if you want to use inline editing. On the other side to use inline editing you have to start inline editing, for example you can start editRow inside of onSelectRow callback (see the documentation). So the code which you posted just ignores editurl: 'clientArray' and it works like pure cell editing.

The main problem which you have is unsaved data on paging. To solve the problem you need just call explicitly saveCell method inside of onPaging callback. The parameters iRow and iCol required for saveCell you can get as the property of the standard jqGrid options (using getGridParam method). The corresponding code can be line below:

onPaging: function () {
    var $self = $(this), p = $self.jqGrid("getGridParam");
    $self.jqGrid("saveCell", p.iRow, p.iCol);
}

The next potential problem in your code: the data are not full. The input data should contains id property to identify every item of input data. The array of input data contains for example multiple Toronto items. It could be just a problem in your test input. The data can be displayed in the grid in sorted form, so to it will be difficult to distinguish the items. It's strictly recommended to have id property assigned. You can get the modified data later using $("#grid").jqGrid("getGridParam", "data") and compare items with original data based on the id to see which one were changed.

I suggest that you add unique id property to every item. It could be for example 1,2,3 or 10,20,30 or something like that. The corresponding modified code is below. I added some options to jqGrid too. You can run the code and verify that the problem with unsaved data during paging is solved.

var mydata = [{
    id: 10,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 20,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 30,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 40,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 50,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 60,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 70,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 80,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 90,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 100,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 110,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 120,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 130,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 140,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 150,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 160,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 170,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 180,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 190,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 200,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 210,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 220,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 230,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 240,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 250,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 260,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 270,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 280,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 290,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 300,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 310,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 320,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 330,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 340,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 350,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 360,
    name: "Paris",
    country: "France",
    continent: "Europe"
},{
    id: 370,
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    id: 380,
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    id: 390,
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    id: 400,
    name: "Paris",
    country: "France",
    continent: "Europe"
}];

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [
      { name: 'name' },
      { name: 'country' },
      { name: 'continent' }
    ],
    cmTemplate: { editable: true },
    rowNum: 10,
    pager: '#pager',
    cellEdit: true,
    cellsubmit: 'clientArray',
    rownumbers: true,
    gridview: true,
    autoencode: true,
    height: 'auto',
    onPaging: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");
        $self.jqGrid("saveCell", p.iRow, p.iCol);
    }
});

html, body { font-size: 75%; }
.ui-jqgrid-hdiv { overflow-y: hidden; }

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
  $.jgrid.no_legacy_api = true;
  $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>