We Keep Coding

After row saved call back in jqgrid

I need to able to tap into an event after row has been updated, I use inline editing. There is a beforeSend event in ajaxRowOptions but no matching after.
How do I implement an after save callback?
Here is my grid:
$('#myGrid').jqGrid({
datatype: 'local',
jsonReader: common.jqgrid.jsonReader('Code'),
editurl: common.getServerPath() + 'myAjax/updateSomething/',
ajaxRowOptions: {
beforeSend: function (jqXhr, settings) {
//something here
}
}
},
mtype: 'POST',
pager: '#myPager',
colNames: ['Method', 'Type', 'Package', 'Disc %'],
colModel: [
{
name: 'Code',
index: 'Code',
width: 25,
sortable: false
},
{
name: 'MethodType',
index: 'MethodType',
width: 10,
sortable: false,
align: 'center'
},
{
name: 'ProfNo',
index: 'ProfNo',
width: 15,
sortable: false,
align: 'center'
},
{
name: 'Discount',
index: 'Discount',
width: 15,
sortable: false,
edittype: 'text',
align: 'right',
editable: true,
editrules: {
number: false,
custom: true,
custom_func: validateDiscount
}
}],
scroll: true,
hidegrid: false,
altRows: true,
altclass: 'gridAltRowClass',
height: 330,
scrollOffset: 0,
width: 770,
rowNum: 500,
footerrow: true,
userDataOnFooter: true
});
and
validateDiscount: function (value) {
if (isNaN(value)) {
return [false, 'Discount must be a number.'];
}
else {
var numValue = parseFloat(Number(value).toFixed(2));
if (numValue >= 100.00) {
return [false, 'is not a valid value. Discount must be a number less than 100.'];
}
}
return [true, ''];
},

jqGrid dropdown has wrong value on edit form

One of the three dropdowns on my edit form is not being set correctly when the form opens. The two other dropdowns on the form are properly set. The dropdown data is being returned from the server in the form of <select><option value='#'>blah</option></select>.
classDesc, purchClass and company are three fields using a dropdown on the edit form. All display correctly on the grid, but on the edit form company always displays the first option. The value shown in the column on the grid is present in the dropdown data returned from the server but it's not being selected. (See screenshot) I've tried forcing the value in afterShowForm, but that has no effect. jqGrid 4.6.0
Here's my column model:
colModel : [
{ name:'id', index:'id', width:50, sortable:true, hidden: false, editable: true, align: 'right', editrules: {edithidden: false}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
{ name:'submittable', index:'submittable', width:42,sortable:false, align: 'center', search: false, cellattr: function () { return ' title="Submit this order"'; }},
{ name:'statusId', index:'statusId', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
{ name:'statusClassId', index:'statusClassId', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
{ name:'status', index:'status', width:100, sortable:true, hidden: false, editable:true, editoptions:{readonly:"true", defaultValue:"Open"}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
{ name:'dlcd', index:'dlcd', width:50, sortable:true, hidden: false, editable:true, editoptions:{readonly: true, defaultValue:"<%=userDatabean.getNumber()%>"}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
{ name:'classId', index:'classId', width:10, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
{ name:'classDesc', index:'classDesc', width:75, sortable:true, editable:true, edittype:'select', editoptions: {dataUrl:'/rebate/rest/lookup/v1/getClass'}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
{ name:'purchClassId', index:'purchClassId', width:10, sortable:false, hidden: true, editable: true, editrules: {edithidden: false}},
{ name:'purchClass', index:'purchClass', width:70, sortable:true, editable:true, edittype:'select', editoptions: { dataUrl:'/rebate/rest/lookup/v1/getPurch'}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
{ name:'purchOther', index:'purchOther', width:150, sortable:false, hidden: true, editable:true, editrules: {edithidden: true}},
{ name:'custId', index:'custId', width:30, sortable:false, hidden: false, editable: true, editrules: {edithidden: false}},
{ name:'company', index:'company', width:175, sortable:true, editable:true, edittype:'select', editoptions: {dataUrl:'/rebate/rest/lookup/v1/getCustomer'}, searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true}},
{ name:'poNum', index:'poNum', width:15, sortable:false, hidden: true, editable:true, editrules: {edithidden: true}},
{ name:'deliveryDate', index:'deliveryDate', width:80, sortable:true, hidden: false, editable:true, sorttype: "integer",
formatter: function (cellValue, options, rowdata, action) {
var date = new Date(cellValue);
var year = date.getFullYear();
var month = date.getMonth() < 9
? "0" + (date.getMonth()+1)
: (date.getMonth()+1);
var day = date.getDate() <=9
? "0" + date.getDate()
: date.getDate();
return [year,month,day].join("-");
},
searchoptions: { sopt: ['eq','bw', 'cn']}, editrules: {required:true},
editoptions: { maxlength: 12, dataInit: function(element){ $(element).datepicker({ dateFormat: "yy-mm-dd" }) } },
editrules: { date: true, required: false }, editrules: {required:true}},
{ name:'dlrInfo', index:'dlrInfo', width:15, sortable:false, hidden: true, editable:true, editrules: {edithidden: true}, editoptions:{size:50, maxlength: 100}},
{ name:'file1', index: 'file1', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: true}},
{ name:'file2', index: 'file2', width:50, sortable:false, hidden: true, editable: true, editrules: {edithidden: true}},
{ name:'terms', index:'terms', width:50, sortable:false, hidden: true, editable: true, edittype:'checkbox', editoptions: {value:"true:false"}, editrules: {edithidden: true},
formoptions:{label: 'Terms'}
},
],
And the navGrid w/the edit parameters:
$("#orderGrid").jqGrid('navGrid', '#orderGridPager', {
edit : true,
add : true,
del : false,
search : true
},{ //Edit form
url : '/rebate/rest/header/v1/update',
width: 600,
viewPagerButtons: false,
closeAfterEdit: true,
recreateForm: true,
modal: true,
beforeShowForm: function ($form) {
if($('#file1').val()=='') { //no file so add the file inputs
$('#tr_file1').html('<td class="CaptionTD">Receipt 1</td><td class="DataTD"> <input type="file" enctype="multipart/form-data" id="file1" name="file1" class="FormElement"></td>');
$('#tr_file2').html('<td class="CaptionTD">Receipt 2</td><td class="DataTD"> <input type="file" enctype="multipart/form-data" id="file2" name="file2" class="FormElement"></td>');
} else { //we have a file so just show the file name
$('#tr_file1').html('<td class="CaptionTD">Receipt 1</td><td class="CaptionTD"> ' + $('#file1').val() +'</td>');
$('#tr_file2').html('<td class="CaptionTD">Receipt 2</td><td class="CaptionTD"> ' + $('#file2').val() +'</td>');
}
$form.find("#status,#dlcd,#id")
.prop("readonly", true)
.addClass("ui-state-disabled");
if(!security[userLevel][$("#statusClassId").val()-1]) {
//make all fields read only.
$form.find("input,select,button")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest(".DataTD")
.prev(".CaptionTD")
.prop("disabled", true);
$form.parent().find('#sData').hide();
}
},
afterShowForm: function(formId) {
$("#company").val($("#custId").val()).prop("select",true);
console.log("after custId: " + $("#custId").val());
},
beforeSubmit: function(postdata, formid) {
var chk = checkBeforeSubmit();
if(!chk[0]) return chk;
return [true, null, null];
},
serializeEditData: function (postdata) {
return getFieldData("FrmGrid_orderGrid");
},
afterSubmit: function(response, postdata) {
sendFormFiles(response.responseText);
//console.log(response);
$('#grid').trigger( 'reloadGrid' );
return [true,null,null];
},
errorTextFormat: function(response) {
return response.responseText=="" ?"400.1: An unknown error occured." : response.responseText;
}
}

This turned out to be a data issue.
The query to populate the grid pulled in just the company name, the query for the lookup to build the dropdown was concatenating a few other fields into the display value. I assumed jqgrid would use the custId value to select the right element in the dropdown but it's using the display value.

How to unchecked all checked checkbox upon loading of dialog box contain JQgrid?

Hello as title above I have a problem that when I checked my checkedbox name ( $("#divLeaveIsHalfDay").click(function () ) that call the dialog box to open and contains my JQgrid name LeaveHalfDay.
function LeaveHalfDay() {
var url1 = URL;
$("#LeaveHalfDayDataEntryList").jqGrid({
url: url1,
datatype: 'json',
mtype: 'POST',
colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
colModel: [
{ name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },
{name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
{ name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 55, align: 'left' }
],
pager: $('#LeaveHalfDayDataEntryPager'),
rowNum: 5,
rowList: [5, 10, 20],
sortname: '',
sortorder: '',
viewrecords: true,
imgpath: '/Content/themes/redmond/images/',
height: '100%',
loadComplete: function (result, rowid) {
var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
var len = ids.length, newLine;
if (len < 5) {
AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
}
}
});
return false;
}
I want to unchecked all checked, checked boxes upon showing of my dialog box.
This are my checked boxes cbox_leave_half and cbox_leave_halfPM in my grid. Thanks.

tr Id in JqGrid always 0

I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});

Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.

How to put data on the total "FooterRow"?

I am using jqGrid plugin 4.6.0 with jQuery 1.11.0 to generate a report that needs the total in the summary. I was only able to generate the total grouped by column. jqGrid has a property called footerrow that is supposed to be the summary of the grid.
I need to place the total of the whole report in the FooterRow, but I was not able to do it.
$("#respostaRelatorio").jqGrid({
url: urlRelatorio + "?" + dadosRelatorio,
colModel: modeloColunas,
mtype: "POST",
altRows: true,
datatype: "json",
loadonce: true,
height: "auto",
width: 1130,
rowNum: 10,
rowList: [ 10, 20, 30, 40, 50 ],
viewrecords: true,
pager: "#paginacao",
sortorder: "asc",
shrinkToFit: false,
headertitles: true,
loadui: "disable",
rownumbers: true,
autoencode: true,
caption: "Resultados encontrados",
deselectAfterSort: true,
gridview: true,
idPrefix: "id",
rowTotal: 4000,
sortable: true,
toppager: true,
resizable: true,
grouping: true,
groupingView: {
groupField: [ 'loginMedico' ],
groupCollapse: false,
groupOrder: [ 'asc' ],
groupSummary: [ true ],
groupDataSorted: true
},
footerrow: true,
userDataOnFooter: true
});
var modeloColunas = [
{ name: "loginMedico", index: "loginMedico", jsonmap: "loginMedico", label: "Login Médico", sortable: true, sorttype: "text", summaryType: "count", summaryTpl: "total" },
{ name: "nomeMedico", index: "nomeMedico", jsonmap: "nomeMedico", label: "Nome do Médico", sortable: true, sorttype: "text" },
{ name: "perfilMedico", index: "perfilMedico", jsonmap: "perfilMedico", label: "Perfil Médico", sortable: true, sorttype: "text"},
{ name: "tipoSolicitacao", index: "tipoSolicitacao", jsonmap: "tipoSolicitacao", label: "Tipo da Solicitação", sortable: true, sorttype: "text" },
{ name: "cancelada", index: "cancelada", jsonmap: "cancelada", label: "Cancelada", sortable: true, sorttype: "int" },
{ name: "liberada", index: "liberada", jsonmap: "liberada", label: "Liberada", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "negada", index: "negada", jsonmap: "negada", label: "Negada", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "pendente", index: "pendente", jsonmap: "pendente", label: "Pendente", sortable: true, sorttype: "int", summaryType: "sum" },
{ name: "total", index: "total", jsonmap: "total", label: "Total", sortable: true, sorttype: "int", summaryTpl: "total"} ];

Crossposting (and translating) my answer on SO-PT (written in Portuguese):
Check out this example.
Basically, you need to add an loadComplete function to your jqGrid, it will be used to build the footerData:
loadComplete: function () {
var $self = $(this);
var sumCanceled = $self.jqGrid("getCol", "cancelada", false, "sum");
var sumReleased = $self.jqGrid("getCol", "liberada", false, "sum");
var sumDenied = $self.jqGrid("getCol", "negada", false, "sum");
var sumPending = $self.jqGrid("getCol", "pendente", false, "sum");
$self.jqGrid("footerData", "set", {
loginMedico: "Total:",
cancelada: sumCanceled,
liberada: sumReleased,
negada: sumDenied,
pendente: sumPending
});
}
Source: getting the sum using footerdata on jqgrid