Although this question is similar, it was not helpful in my situation. I have several jqGrids opening in a modal, all with inline editing enabled, keys: true, and a very simple aftersavefunc
function defined. However, when the ENTER key is used rather than clicking the save icon, I am not seeing the aftersavefunc
event fire. Some of the grids are rather large and use of the KEYBOARD strokes are crucial to save time and improve accuracy. Is this a known issue or is there a way to fool jqGrid into thinking the save icon has been clicked?
Below is my jqGrid definition (BEFORE). Any help would be greatly appreciated.
function hiliteQty(i) {
console.log('Highlighting received quantity on #' + i);
$eRow = $('tr#' + i);
var qtyord = $eRow.find('td.qtyOrd').text();
var qtyrec = $eRow.find('td.qtyRec').text();
if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
$eRow.find('td.qtyRec').removeClass('incomplete',100,'linear').addClass('complete',1000,'easeInElastic');
} else {
$eRow.find('td.qtyRec').removeClass('complete',100,'linear').addClass('incomplete',1000,'easeInElastic');
};
}
$(function() {
var ml_id = '<?=$ml_id;?>', ml_name = '<?=$objML_temp->showMLName();?>', suppno = '<?=$objML_temp->gSupp();?>', projnum = '<?=$objJob_temp->gProjectNumber();?>', job_id = '<?=$objML_temp->gJobID();?>', lastDate, lastSel;
$('#special_dialog').dialog({
width:'auto',
height:'auto',
resizable:true
});
$.extend($.jgrid.defaults,{
inlineData:{
ml_id:ml_id,
project_number:projnum,
job_id:job_id
},
rowNum:1000,
rowList:[20,50,100,500,1000],
viewrecords:true,
sortorder:'asc',
height:500,
autowidth:true,
deepempty:true,
altRows: true,
grouping: true,
groupingView: {
groupField: ["vendor"],
groupColumnShow: [true],
groupText: ["<b>VENDOR: {0}</b>"],
groupDataSorted: true,
groupSummary: [false]
}
});
// setup Minor Materials grid
var mmGrid = $('#orderMMGrid'),
editingRowId,
mmEditParam = {
keys: true,
oneditfunc: function(id) {
$('#orderMMGrid_ilsave').removeClass('ui-state-disabled');
$('#orderMMGrid_ilcancel').removeClass('ui-state-disabled');
hiliteQty(id);
},
afterrestorefunc: function() {
editingRowId = undefined;
},
aftersavefunc: function(id) {
hiliteQty(id);
}
},
mmAutoCompOpts = {
source: function(request, response) {
$.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
response(data);
});
},
minLength: 3,
focus: function(e,ui) {
$('input:text[name="description"]').val(ui.item.description);
$('input:text[name="vendor"]').val(ui.item.vendor);
$('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
},
select: function(e,ui) {
$('input:text[name="description"]').val(ui.item.description);
$('input:text[name="vendor"]').val(ui.item.vendor);
$('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
$('input:text[name="vendor_id"]').val(ui.item.vendor_id);
}
},
mmAddParam = {
rowID: 'new',
position:'last'
};
mmGrid.jqGrid({
url: '/json/json.getMinorMaterialsOrder.php?ml_id=' + ml_id,
datatype:'json',
emptyrecords: 'No Minor Materials on this order',
colNames: ['ID','Type','Supp','VID','Vendor','PO#','MasTec Part#','Manufacturer Part#','Description','Ship Date','Qty Ord','Rcvd Date','Qty Rec','Receiving Clerk Notes','Material Manager Notes'],
colModel: [
{ name:'id',
index:'id',
hidden:true,
key:false,
search:false,
viewable:false
},
{ name:'type',
index:'type',
width:35,
sortable:false,
editable:false,
align:'center',
editoptions:{defaultValue:'M'}
},
{ name:'supp',
index:'supp',
width:35,
sortable:false,
editable:false,
align:'center',
editoptions:{defaultValue:suppno}
},
{ name:'vendor_id',
index:'o.vendor_id',
width:0,
hidden:true,
search:false,
align:'center',
viewable:true,
editable:true,
edittype:'text',
editoptions:{size:8,readonly:true}
},
{ name:'vendor',
index:'o.vendor_id',
width:90,
sortable:true,
sorttype:'text',
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:20,readonly:true},
editrules:{required:true}
},
{ name:'order_number',
index:'order_number',
width:55,
sortable:true,
editable:true,
classes:'ui-ellipsis',
align:'center'
},
{ name:'mastec_partno',
index:'mastec_partno',
width:120,
sortable:false,
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{
size:22,
dataInit:function(e) {
$(e).autocomplete(mmAutoCompOpts);
}
},
editrules:{required:true}
},
{ name:'mfgr_partno',
index:'mfgr_partno',
width:120,
sortable:false,
editable:true,
classes:'ui-ellipsis',
alilgn:'left',
edittype:'text',
editoptions:{size:22,readonly:true},
editrules:{required:false}
},
{ name:'description',
index:'description',
width:180,
sortable:false,
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:33,readonly:true},
editrules:{required:true}
},
{ name:'ship_date',
index:'o.ship_date',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
editrules:{required:true},
editoptions:{ size:15,
dataInit: function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'qty_ordered',
index:'qty_ordered',
width:55,
sortable:false,
editable:true,
align:'center',
classes:'qtyOrd',
editrules:{required:true},
editoptions:{size:6}
},
{ name:'rcvd_date',
index:'o.rcvd_date',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
editoptions:{ size:15,
dataInit:function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'qty_received',
index:'qty_received',
width:55,
sortable:true,
editable:true,
align:'center',
classes:'qtyRec',
editoptions:{size:6}
},
{ name:'rc_notes',
index:'rc_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'45'}
},
{ name:'mm_notes',
index:'mm_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'45'}
}
],
pager:'#orderMMFoot',
sortname:'o.id',
caption:'Minor Materials Ordered for ' + ml_name,
afterInsertRow: function(id) {
$('tr#' + id).each(function() {
var qtyord = $(this).find('td.qtyOrd').text();
var qtyrec = $(this).find('td.qtyRec').text();
if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
$(this).find('td.qtyRec').removeClass('incomplete').addClass('complete');
} else {
$(this).find('td.qtyRec').removeClass('complete').addClass('incomplete');
}
});
},
gridComplete: function() {
$('.jqgrow').each(function() {
var qtyord = $(this).find('td.qtyOrd').text();
var qtyrec = $(this).find('td.qtyRec').text();
if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
$(this).find('td.qtyRec').removeClass('incomplete').addClass('complete');
} else {
$(this).find('td.qtyRec').removeClass('complete').addClass('incomplete');
}
});
},
onSelectRow: function(id) {
if(id && id !== lastSel) {
mmGrid.jqGrid('restoreRow',lastSel);
lastSel = id;
}
mmGrid.jqGrid('editRow',id,true);
$('#orderMMGrid_ilsave').removeClass('ui-state-disabled');
$('#orderMMGrid_ilcancel').removeClass('ui-state-disabled');
},
editurl:'/jqg/jqg.saveMinorMaterialEdit.php'
});
mmGrid.jqGrid('navGrid','#orderMMFoot',{
add:false,
edit:false,
del:true
});
mmGrid.jqGrid('inlineNav','#orderMMFoot',{
add:true,
edit:true,
editParams:mmEditParam,
addParams:mmAddParam
});
});
And here is the first jqGrid definition (AFTER), using comments and answer..
function hiliteQty(i) {
console.log('Highlighting received quantity on #' + i);
$eRow = $('tr#' + i);
var qtyord = $eRow.find('td.qtyOrd').text();
var qtyrec = $eRow.find('td.qtyRec').text();
if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
$eRow.find('td.qtyRec').removeClass('incomplete',100,'linear').addClass('complete',1000,'easeInElastic');
} else {
$eRow.find('td.qtyRec').removeClass('complete',100,'linear').addClass('incomplete',1000,'easeInElastic');
};
}
function rcvAll(r) {
var d = dateFormat('isoDate');
var gridid;
$.each(r, function(i,v) {
var $r = $('#' + v);
gridid = $r.closest('table').attr('id');
var qtyOrd = $r.find('.qtyOrd').text();
$('#' + gridid).jqGrid('editRow', v);
if ( $r.find('.qtyRec > input').val() !== qtyOrd.parseInt() ) {
$r.find('.qtyRec > input').val(qtyOrd);
$r.find('.rcvDate > input').val(d);
console.log(dateFormat('isoMicro'));
$('#' + gridid).jqGrid('saveRow', v, false);
console.log(dateFormat('isoMicro'));
}
});
$('#' + gridid).trigger('reloadGrid');
}
$(function() {
var ml_id = '<?=$ml_id;?>', ml_name = '<?=$objML_temp->showMLName();?>', suppno = '<?=$objML_temp->gSupp();?>', projnum = '<?=$objJob_temp->gProjectNumber();?>', job_id = '<?=$objML_temp->gJobID();?>', lastDate;
$('#special_dialog').dialog({
width:'auto',
height:'auto',
resizable:true
});
$.extend($.jgrid.defaults,{
inlineData:{
ml_id:ml_id,
project_number:projnum,
job_id:job_id
},
rowNum:1000,
rowList:[20,50,100,500,1000],
viewrecords:true,
sortorder:'asc',
height:500,
autowidth:true,
deepempty:true,
altRows: true,
grouping: true,
groupingView: {
groupField: ["vendor"],
groupColumnShow: [true],
groupText: ["<b>VENDOR: {0}</b>"],
groupDataSorted: true,
groupSummary: [false]
}
});
//////////////////////////////
// setup Minor Materials grid
//////////////////////////////
var $mmGrid = $('#orderMMGrid'),
$mmFoot = $('#orderMMFoot'),
mmEditParam = {
keys: true,
oneditfunc: function(id) {
$('#orderMMGrid_ilsave').removeClass('ui-state-disabled');
$('#orderMMGrid_ilcancel').removeClass('ui-state-disabled');
hiliteQty(id);
},
aftersavefunc: function(id) {
hiliteQty(id);
}
},
mmAddParam = {
rowID: 'new',
position:'last',
addRowParams: mmEditParam
},
mmAutoCompOpts = {
source: function(request, response) {
$.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
response(data);
});
},
minLength: 3,
focus: function(e,ui) {
$('input:text[name="description"]').val(ui.item.description);
$('input:text[name="vendor"]').val(ui.item.vendor);
$('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
},
select: function(e,ui) {
$('input:text[name="description"]').val(ui.item.description);
$('input:text[name="vendor"]').val(ui.item.vendor);
$('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
$('input:text[name="vendor_id"]').val(ui.item.vendor_id);
}
};
$mmGrid.jqGrid({
url: '/json/json.getMinorMaterialsOrder.php?ml_id=' + ml_id,
datatype:'json',
emptyrecords: 'No Minor Materials on this order',
colNames: ['ID','Type','Supp','VID','Vendor','PO#','MasTec Part#','Manufacturer Part#','Description','Ship Date','Qty Ord','Rcvd Date','Qty Rec','Receiving Clerk Notes','Material Manager Notes'],
colModel: [
{ name:'id',
index:'id',
hidden:true,
key:false,
search:false,
viewable:false
},
{ name:'type',
index:'type',
width:35,
sortable:false,
editable:false,
align:'center',
editoptions:{defaultValue:'M'}
},
{ name:'supp',
index:'supp',
width:35,
sortable:false,
editable:false,
align:'center',
editoptions:{defaultValue:suppno}
},
{ name:'vendor_id',
index:'o.vendor_id',
width:0,
hidden:true,
search:false,
align:'center',
viewable:true,
editable:true,
edittype:'text',
editoptions:{size:8,readonly:true}
},
{ name:'vendor',
index:'o.vendor_id',
width:90,
sortable:true,
sorttype:'text',
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:20,readonly:true},
editrules:{required:true}
},
{ name:'order_number',
index:'order_number',
width:55,
sortable:true,
editable:true,
classes:'ui-ellipsis',
align:'center'
},
{ name:'mastec_partno',
index:'mastec_partno',
width:120,
sortable:false,
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{
size:22,
dataInit:function(e) {
$(e).autocomplete(mmAutoCompOpts);
}
},
editrules:{required:true}
},
{ name:'mfgr_partno',
index:'mfgr_partno',
width:120,
sortable:false,
editable:true,
classes:'ui-ellipsis',
alilgn:'left',
edittype:'text',
editoptions:{size:22,readonly:true},
editrules:{required:false}
},
{ name:'description',
index:'description',
width:180,
sortable:false,
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:33,readonly:true},
editrules:{required:true}
},
{ name:'ship_date',
index:'o.ship_date',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
editrules:{required:true},
editoptions:{ size:15,
dataInit: function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'qty_ordered',
index:'qty_ordered',
width:55,
sortable:false,
editable:true,
align:'center',
classes:'qtyOrd',
editrules:{required:true},
editoptions:{size:6}
},
{ name:'rcvd_date',
index:'o.rcvd_date',
width:85,
sortable:true,
classes:'rcvDate',
sorttype:'date',
editable:true,
align:'center',
editoptions:{ size:15,
dataInit:function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'qty_received',
index:'qty_received',
width:55,
sortable:true,
editable:true,
align:'center',
classes:'qtyRec',
cellattr:function(rowId,val,rawObj,cm,rdata) {
if (val === rawObj.qty_ordered) {
return ' class="complete"';
} else {
return ' class="incomplete"';
}
},
editoptions:{size:6}
},
{ name:'rc_notes',
index:'rc_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'45'}
},
{ name:'mm_notes',
index:'mm_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'45'}
}
],
pager:'#orderMMFoot',
sortname:'o.id',
caption:'Minor Materials Ordered for ' + ml_name,
onSelectRow: function(id) {
var savedRows = $mmGrid.jqGrid('getGridParam','savedRow');
if(savedRows.length > 0) {
$mmGrid.jqGrid('restoreRow', savedRows[0].id);
}
$mmGrid.jqGrid('editRow', id, mmEditParam);
},
editurl:'/jqg/jqg.saveMinorMaterialEdit.php'
});
$mmGrid
.jqGrid('navGrid','#orderMMFoot',{
add:false,
edit:false,
del:true
})
.jqGrid('navSeparatorAdd','#orderMMFoot',{
sepclass:'ui-separator',
sepcontent:''
})
.jqGrid('navButtonAdd','#orderMMFoot',{
title:'Receive All',
caption:'',
buttonicon:'ui-icon-cart',
onClickButton:function() {
var dataRowIDs = $mmGrid.jqGrid('getDataIDs');
rcvAll(dataRowIDs);
},
position:'last'
})
.jqGrid('navSeparatorAdd','#orderMMFoot',{
sepclass:'ui-separator',
sepcontent:''
})
.jqGrid('inlineNav','#orderMMFoot',{
add:true,
edit:true,
save:true,
cancel:true,
editParams:mmEditParam
});