JqGrid: Why not the events I defined to crop the grid?
I am making in-line changes to the grid, but cannot seem to receive any events that would be associated with this edit.
Here I have afterSubmit: and I want it to fire after the user has edited the Quantity field in the grid, but it never fires.
$('#tblLines').jqGrid({
url: createUrl('/CRA/GetLines/'),
editurl: '/CRA/EditModifyLine',
emptyrecords: '',
datatype: 'json',
mtype: 'GET',
colNames: ['Group', 'Description', 'Quantity'],
colModel: [
{ name: 'Group', index: 'Group', width: 100, align: 'left' },
{ name: 'Description', index: 'Description', width: 400, align: 'left' },
{ name: 'Quantity', index: 'Quantity', width: 150, align: 'left', editable: true },
pager: jQuery('#pgrLines'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Group',
sortorder: "desc",
viewrecords: true,
caption: 'Core Group Lines',
onSelectRow: function(id) {
$('#tblCoreGroupLines').editRow(id, true);
lastsel = id;
},
afterSubmit: function(response, postdata) {
alert('got here');
},
postData: { craId: $('#CraId').val() }
});
I tried to define events below as part of navControl but that doesn't work either. Inline editing works great - the POST succeeds and the result is returned, it just doesn't get caught in the events that need to be bound to it. I've tried all the events related to changing the Quantity field, but none of them work.
Have I identified the event at the correct location? Am I missing a property on the grid or something?
source to share
I think you need to pass afterSubmit
in the properties argument editRow
.
So you need to move afterSubmit
like this:
.....
onSelectRow: function(id) {
$('#tblCoreGroupLines').editGridRow(id, { afterSubmit: function(response, postdata) {
alert('got here');
}
});
lastsel = id;
},
...
The editGridRow docs kind of help in this regard.
The above example will result in modification (since that's the only place where afterSubmit is used). If you want to do something after a successful update using single row edit you should do the following inside onSelectRow
$('#tblCoreGroupLines').editGridRow(id,true, undefined, function(res) {
// res is the response object from the $.ajax call
alert('success!!')
} );
Here's the method signature for editRow from js / grid.inlineedit.js
editRow : function(rowid,keys,oneditfunc,succesfunc, url, extraparam, aftesarvefunc,errorfunc, afterrestorefunc) {
source to share