I'm starting out with a blank grid, then have an icon to browse for a spreadsheet that can import a list of users. My grid is set up like this:
$grid.jqGrid({
datatype: 'local',
height: 'auto',
width: '100%',
colNames: ['Last Name', 'First Name', 'Username', 'Email', 'Phone', ...],
colModel: [
{ name:'lastName', width:45, sortable:false, searchoptions:{sopt:['cn','nc']},
editable:true, editoptions:{maxlength:20}
},
{ name:'firstName', width:45, sortable:false, searchoptions:{sopt:['cn']},
editable:true, editoptions:{maxlength:20}
},
{ name:'username', width:60,
editable:false, editoptions:{maxlength:50}
},
{ name:'email', width:50, sortable:true, searchoptions:{sopt:['cn']},
editable:true, editoptions:{maxlength:50}, editrules:{email:true}
},
{ name:'phone', width:35, sortable:true, searchoptions:{sopt:['cn']},
editable:true, editoptions:{maxlength:10}
},
...
],
shrinkToFit: true,
forceFit: true,
autowidth: true,
rowTotal: 2000,
rowList: [20, 30, 40, 50],
loadonce: true,
gridview: true,
pager: pagerId,
sortname: 'Last Name',
viewrecords: true,
altRows: true,
altclass: 'rowAltClass',
ignoreCase: true,
cellEdit: true,
cellsubmit: 'clientArray',
editurl:'clientArray',
caption: '<div class="bulkUserCaption"><span>Users To Be Added</span></div>',
beforeEditCell: function(rowId, cellName, value) {
prevCellVal = value;
},
afterSaveCell: function(rowId, cellName, value, iRow, iCol) {
console.log("afterSaveCell");
},
beforeSaveCell: function(rowId, cellName, value, iRow, iCol) {
console.log("beforeSaveCell");
},
beforeSubmitCell: function(rowId, cellName, value, iRow, iCol) {
console.log("beforeSubmitCell");
// Error check the email for a valid email address.
if (cellName == "email") {
email = value;
// Perform some error check on email.
if (isValidEmail(email)) {
$grid.jqGrid('setCell', rowId, 'email', email);
$grid.jqGrid('getLocalRow', rowId).email = email;
} else {
// Alert user to email error
}
}
},
afterSubmitCell: function(response, rowId, cellName, value, iRow, iCol) {
console.log("afterSubmitCell");
},
beforeSelectRow: function(rowId) {
$(this).jqGrid('setSelection', rowId, true);
return false; // allow selection (true) or unselection (false)
},
onSelectRow: function(rowId) {
if (rowId && rowId !== lastCell) {
$(this).jqGrid('saveCell', rowIdx, lastCol);
lastCell = rowId;
}
},
ondblClickRow: function(rowId, iRow, iCol) {
$(this).jqGrid('editCell', iRow, iCol, true);
lastCell = rowId;
lastCol = iCol;
rowIdx = iRow * pgNum;
},
loadComplete: function() {
preserveFilters($(this));
}
});
I have a function called doImport() that handles the importing of the spreadsheet, transforms the data a little, the loads the grid.
if (json.msg == "success") {
// Reload the grid with the new data
$grid.setGridParam({'datatype':'local', 'data': json.rows}).trigger('reloadGrid');
} else {
// Show alert message
}
I get a nice grid of users but I need to be able to edit them if there are any errors in the data. I am able to edit, but if I'm on page 2, for example, and I'm editing a user's email address on row 20, when I hit enter to make the change, it puts the new data in the same column and same row, but on page 1.
Not sure where I've gone wrong here, but I can't get the edit to work as expected. Any help would be appreciated.
You should have unique ids in the grid. Usually this is done in jsonReader (in your case localReader) grid property or you can set it using the key:true property in colModel field. This will grand you editing without problems.