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, ''];
},

How to get jqGrid rows in json objects after applying search filter

I have added a search textbox which allows users to perform search on all rows and columns now i want to get all the filtered rows in json format so i can generate a report.
Below is the code for Jqgrid
var grid = $("#jqGrid");
grid.jqGrid({
url: 'VehicleMaster.aspx/GetLoadData',
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
ajaxSelectOptions: { type: "GET" },
jsonReader: {
repeatitems: false,
root: function(obj) {
return JSON.parse(obj.d);
}
},
loadonce: true,
sortable: true,
shrinkToFit: false,
autowidth: true,
rowNum: 25,
rowList: [15, 25, 50, 75, 100],
viewsortcols: [true, 'vertical', true],
pager: '#pager',
pgtext: "Page from {0} to {1}",
styleUI: 'Bootstrap',
height: $(window).height() - (343), //DYNAMIC HEIGHT
loadComplete: function() {
$(this).find(" > tbody > tr.jqgrow:odd").addClass("altRowClassEven");
$(this).find(" > tbody > tr.jqgrow:even").addClass("altRowClassOdd");
},
colNames: gridColumnNames, //FROM BACKEND
colModel: [
{ label: 'Id', name: 'Id', width: 130, editable: false, hidden: true },
{ label: 'VehicleName', name: 'VehicleName', width: 130, editable: false },
{ label: 'PlateCode', name: 'PlateCode', editable: true, width: 100 },
{
label: 'PlateNo',
name: 'PlateNo',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{ label: 'Owner', name: 'Owner', editable: true, width: 100 },
{ label: 'Brand', name: 'Brand', editable: true, width: 100 },
{ label: 'Color', name: 'Color', editable: true, width: 100 },
{ label: 'Make', name: 'Make', editable: true, width: 100 },
{ label: 'Model', name: 'Model', editable: true, width: 100 },
{ label: 'YearModel', name: 'YearModel', editable: true, width: 100 },
{
label: 'Seats',
name: 'Seats',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'Doors',
name: 'Doors',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'RegistrationDate',
name: 'RegistrationDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
//$(domElem).inputmask('99/99/9999');
}
}
},
{
label: 'RegistrationExpiry',
name: 'RegistrationExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'ChassisNo', name: 'ChassisNo', editable: true, width: 100 },
{ label: 'EngineNo', name: 'EngineNo', editable: true, width: 130 },
{ label: 'TrafficFileNo', name: 'TrafficFileNo', editable: true, width: 130 },
{ label: 'VehicleType', name: 'VehicleType', editable: true, width: 130 },
{ label: 'InsuranceCompany', name: 'InsuranceCompany', editable: true, width: 160 },
{
label: 'InsuranceDate',
name: 'InsuranceDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'InsuranceExpiry',
name: 'InsuranceExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'PlateIssueDate',
name: 'PlateIssueDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'Department', name: 'Department', editable: true, width: 130 },
{ label: 'Description', name: 'Description', editable: true, width: 130 },
{
label: 'Column1',
name: 'Column1',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column2',
name: 'Column2',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column3',
name: 'Column3',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column4',
name: 'Column4',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column5',
name: 'Column5',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column6',
name: 'Column6',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column7',
name: 'Column7',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column8',
name: 'Column8',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column9',
name: 'Column9',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column10',
name: 'Column10',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
}
],
multiselect: false,
cellEdit: true,
hiddengrid: false,
loadtext: 'Loading Data...',
sortascimg: 'sort_asc.gif',
sortdescimg: 'sort_desc.gif',
cellsubmit: 'clientArray',
viewrecords: true,
beforeSelectRow: function(rowid) {
console.log(rowid);
if (typeof selectedRows[0] !== "undefined") {
updateSelectedRow(selectedRows[selectedRows.length - 1]);
console.log(selectedRows[selectedRows.length - 1]);
}
selectedRows.push(rowid);
}
});
Below is the code for live search.
$("#globalSearchText").keyup(function() {
var rules = [],
i,
cm,
postData = grid.jqGrid("getGridParam", "postData"),
colModel = grid.jqGrid("getGridParam", "colModel"),
searchText = $("#globalSearchText").val(),
l = colModel.length;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
$.extend(postData, {
filters: {
groupOp: "OR",
rules: rules
}
});
Kindly guide me to resolve this.
Thanks

Free jqGrid: Field undefined error when extending postdata with local data

I have been upgrading my projects to jQuery 1.12.0 and the latest version of free jqGrid. I am now seeing an field undefined error here in jquery.jqGrid.src.js:
this.execute = function() {
var match = _query, results = [];
if (match === null) {
return self;
}
$.each(_data, function() {
if (eval(match)) { results.push(this); }
});
_data = results;
return self;
};
The match string looks like:
(String(ErrorCells).toUpperCase() !== String("0").toUpperCase())
I'm filtering out rows with errors (ErrorCells is used as a bit field), but it looks like an explicit this.ErrorCells is necessary. I can't wrap my head around what exactly changed and if there is a resolution without modifying the jqGrid source.
**** UPDATE ****
Below you can see that in the $.each handler, ErrorCells is undefined, but this.ErrorCells is.
This is the code extending the postdata with the filtering criteria:
$.extend(postdata, { // - set filter condition
filters: '',
searchField: 'ErrorCells',
searchOper: 'ne',
searchString: '0'
});
$grid.jqGrid('setGridParam', { search: true, postData: postdata });
$grid.trigger('reloadGrid', [{ page: 1}]);
and this is the grid configuration:
$grid.jqGrid({
url: "Loader.svc/GetData", // - web invoke post
editurl: "clientArray", // - normally the endpoint to post edits, in this case we just edit local data
postData: { "uniqueFolder": uniqueFolder, "xlsName": xlsName, "solIds": GetSolIdString(), "subcompany": _selectedConfiguration.MYSUBCOMPANY, "requireSolId": _selectedConfiguration.MYISBRANCHIDREQ },
datatype: "json",
loadonce: true, // - load data once on server side, then switch to local data handling
mtype: "POST",
ajaxGridOptions: { contentType: "application/json", cache: false },
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
jsonReader: {
id: "Id",
root: function(obj) { return obj.rows; },
page: function(obj) { return obj.page; },
total: function(obj) { return obj.total; },
records: function(obj) { return obj.records; }
},
headertitles: true,
search: true,
rowNum: 15, // - rows per page
rowList: [5, 10, 15, 20], // - options for rows per page
pager: "#pager", // - element anchor for navigation panel
gridview: true, // - row at once binding (faster performance)
autoencode: true, // - encode html data
ignoreCase: true, // - searches are case-insensitive
//sortname: "IDNumber", // - sort column for initial load
viewrecords: true, // - displays the beginning and ending record number in the grid, out of the total number of records in the query
sortorder: "asc",
caption: "Card Personalization",
height: "100%",
shrinkToFit: false, // - defines how the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid
autowidth: true,
multiselect: false,
loadui: "disable",
colNames: ["IDType", "IDNumber", "LastName", "FirstName", "MiddleInitial", "EmbossLine1", "EmbossLine2", "Address1", "Address2", "Address3", "City", "Country", "State",
"PostalCode", "DateOfBirth", "EmailAddress", "HomePhone", "OfficePhone", "MobilePhone", "PhotoReference", "SalaryID", "SolID", "IDImage", "ErrorCells", "ErrorDescriptions", "IDThumb"],
colModel: [
{ name: "IDType", width: 80, align: "left", editable: true, sortable: true, sorttype: "integer",
stype: "select",
edittype: "select",
formatter: "select",
formoptions: { elmprefix: "<font color='red'>*</font>" },
searchoptions: { sopt: ["eq"], value: GetIdTypes(true) },
editrules: { required: true, integer: true, minValue: 1, maxValue: 50 },
editoptions: { value: GetIdTypes(false), dataInit: function(elem) { $(elem).width(150); } },
searchOptions: { defaultValue: 4 },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(0, rawObject); }
},
{ name: "IDNumber", width: 80, align: "left", editable: true, sortable: true,
editrules: { required: true, custom: true, custom_func: validateIDNumber },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(1, rawObject); }
},
{ name: "LastName", width: 100, align: "left", editable: true, sortable: true,
editrules: { required: true, custom: true, custom_func: validateName },
editoptions: { maxlength: 200 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(2, rawObject); }
},
{ name: "FirstName", width: 100, align: "left", editable: true, sortable: true,
editrules: { required: true, custom: true, custom_func: validateName },
editoptions: { maxlength: 200 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(3, rawObject); }
},
{ name: "MiddleInitial", width: 70, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validateName },
editoptions: { maxlength: 40 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(4, rawObject); }
},
{ name: "EmbossLine1", width: 100, align: "left", editable: true, sortable: true, search: false,
editrules: { required: $('#cbFirstLineEmbossing').prop('checked'), custom: true, custom_func: validateEmbossline },
editoptions: { maxlength: 19, dataInit: function(el) { $(el).css('text-transform', 'uppercase'); } },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(5, rawObject); }
},
{ name: "EmbossLine2", width: 100, align: "left", editable: true, sortable: true, search: false,
editrules: { required: $('#cbSecondLineEmbossing').prop('checked'), custom: true, custom_func: validateEmbossline },
editoptions: { maxlength: 19, dataInit: function(el) { $(el).css('text-transform', 'uppercase'); } },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(6, rawObject); }
},
{ name: "Address1", width: 200, align: "left", editable: true, sortable: true, search: false,
editrules: { required: true, custom: true, custom_func: validateAddress },
editoptions: { maxlength: 50 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(7, rawObject); }
},
{ name: "Address2", width: 200, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validateAddress },
editoptions: { maxlength: 50 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(8, rawObject); }
},
{ name: "Address3", width: 200, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validateAddress },
editoptions: { maxlength: 50 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(9, rawObject); }
},
{ name: "City", width: 100, align: "left", editable: true, sortable: true,
editrules: { required: true, custom: true, custom_func: validateCity },
editoptions: { maxlength: 50 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(10, rawObject); }
},
{ name: "Country", width: 50, align: "left", editable: true, edittype: "select", stype: "select", sortable: true,
editrules: { required: true, custom: true, custom_func: validateCountry },
formoptions: { elmprefix: "<font color='red'>*</font>" },
searchoptions: {
value: GetCountries(true),
dataInit: function(elem) {
var v = $(elem).val();
if (v !== '')
setStateValues(v, true);
},
dataEvents: [
{ type: "change", fn: function(e) { changeStateSelect($(e.target).val(), e.target); } },
{ type: "keyup", fn: function(e) { $(e.target).trigger('change'); } }
]
},
editoptions: {
maxlength: 2,
value: GetCountries(false),
dataInit: function(elem) { // - populate the state dropdown based on selected country
var v = $(elem).val();
if (v !== '')
setStateValues(v, false);
setTimeout(function() {
var $element = $(elem),
required = $element.val() === 'US';
$grid.jqGrid('setColProp', 'PostalCode', { editrules: { required: required} });
$('#PostalCode').siblings('.mystar').html(required ? '*' : ' ');
$element.width(150);
}, 100);
},
dataEvents: [
{ type: "change", fn: function(e) {
changeStateSelect($(e.target).val(), e.target);
var required = $(e.target).val() === 'US';
$grid.jqGrid('setColProp', 'PostalCode', { editrules: { required: required} });
$('#PostalCode').siblings('.mystar').html(required ? '*' : ' ');
}
},
{ type: "keyup", fn: function(e) { $(e.target).trigger('change'); } }
]
},
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(11, rawObject); }
},
{ name: "State", width: 50, align: "left", editable: true, edittype: "select", stype: "select", sortable: true,
editrules: { required: true, custom: true, custom_func: validateState },
formoptions: { elmprefix: "<font color='red'>*</font>" },
editoptions: {
value: {},
maxlength: 4,
dataInit: function(elem) { $(elem).width(150); }
},
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(12, rawObject); }
},
{ name: "PostalCode", width: 70, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validatePostal },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: "<span class='mystar' style='color:red'> </span>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(13, rawObject); }
},
{ name: "DateOfBirth", width: 80, align: "left", editable: true, sortable: true, sorttype: "date", search: false,
editrules: { required: true, date: true, custom: true, custom_func: validateDate },
formoptions: { elmprefix: "<font color='red'>*</font>", elmsuffix: " format: mm/dd/yyyy" },
editoptions: {
size: 10,
maxlength: 10,
dataInit: function(element) {
$(element).datepicker({
dateFormat: "mm/dd/yy", changeMonth: true, changeYear: true, yearRange: "-100y:c+nn", maxDate: "-1d"
}).mask('99/99/9999');
}
},
datefmt: 'mm/dd/yyyy',
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(14, rawObject); }
},
{ name: "EmailAddress", width: 150, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validateEmail },
editoptions: { maxlength: 100 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(15, rawObject); }
},
{ name: "HomePhone", width: 100, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validatePhone },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(16, rawObject); }
},
{ name: "OfficePhone", width: 100, align: "left", editable: true, sortable: true, search: false,
editrules: { required: false, custom: true, custom_func: validatePhone },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(17, rawObject); }
},
{ name: "MobilePhone", width: 100, align: "left", editable: true, sortable: true,
editrules: { required: true, custom: true, custom_func: validatePhone },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(18, rawObject); }
},
{ name: "PhotoReference", width: 100, align: "left", editable: true, sortable: true, search: false,
editrules: { required: true },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(19, rawObject); }
},
{ name: "SalaryID", width: 100, align: "left", editable: true, sortable: true, search: true,
editrules: { required: false, custom: true, custom_func: validateSalaryIdLocal },
editoptions: { maxlength: 30 },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(20, rawObject); }
},
{ name: "SolID", width: 50, align: "left", editable: true, sortable: true, edittype: "select", stype: "select",
editrules: { required: true /*, custom: true, custom_func: validateSolId*/ },
editoptions: { value: GetSolIds(_selectedConfiguration, false), maxlength: 4 },
searchoptions: { sopt: ["eq"], value: GetSolIds(_selectedConfiguration, true) },
formoptions: { elmprefix: "<font color='red'>*</font>" },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(21, rawObject); }
},
{ name: "IDImage", width: 100, align: "left", editable: true, sortable: true, search: true,
editrules: { required: false, custom: true, custom_func: _validateIDImagePath },
editoptions: { maxlength: 150, readonly: true },
formoptions: { elmprefix: " " },
cellattr: function(rowId, tv, rawObject, cm, rdata) { return SetCellError(22, rawObject); }
},
{ name: "ErrorCells", hidden: true, editoptions: { defaultValue: '0'} },
{ name: "ErrorDescriptions", hidden: true },
{ name: "IDThumb", width: 50, fixed: true,
formatter: function(cellvalue, options, rowObject) {
return '<a id="imgSource_' + options.rowId + '" href="" data-lightbox="image_' + options.rowId + '" data-title=""><img id="imgThumb_' + options.rowId + '" src="" width="30" height="30"></a>';
}
}],
ondblClickRow: function(rowid, ri, ci) { // - double click event handler
var p = $grid[0].p;
if (p.selrow !== rowid) // prevent the row from be unselected on double-click
$grid.jqGrid('setSelection', rowid);
$grid.jqGrid('editGridRow', rowid, editSettings); // - form edit
},
onSelectRow: function(id) { // - select row event handler
if (id && id !== lastSel) {
$grid.jqGrid('restoreRow', lastSel);
lastSel = id;
}
},
beforeRequest: function() { // - on initial load, display empty grid for editing
if (_initialLoad)
$grid.jqGrid('setGridParam', { datatype: "local", loadonce: false });
},
loadError: function(xhr, st, errorThrown) { // - todo: handle error from server during load, need to spruce this up
_initialDataLoad = false;
$('#fileUploadOK').hide();
ShowButtons(false, IsGridValid()); // - refresh button states if grid is loaded
$grid.jqGrid('setGridParam', { datatype: "local", loadonce: false }); // - fail, lets rebind an empty grid for manual entry
Toggle(true); // - slide toggle the top section open
},
loadComplete: function(data) {
$('#filterInvalid').prop('disabled', false);
$grid.jqGrid('hideCol', 'cb'); // - hide the check boxes for multi-select
if (_initialLoad) { // - set the column header tooltips on initial empty bind
setTooltipsOnColumnHeader($grid, 1, 'IDType (required)\nExample:\n1: International Passport\n2: National ID\n3: Drivers License\n4: Other ');
setTooltipsOnColumnHeader($grid, 2, 'IDNumber (required)\nIDNumber for corresponding IDType.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 3, 'LastName (required)\nMax length 50.');
setTooltipsOnColumnHeader($grid, 4, 'FirstName (required)\nMax length 50.');
setTooltipsOnColumnHeader($grid, 5, 'MiddleInitial (optional)\nMax length 40.');
setTooltipsOnColumnHeader($grid, 6, 'EmbossLine1 (optional)\nThis is the text to be embossed on the first line of the card. If it is blank, it will default to the FirstName LastName.\nMax length 19.');
setTooltipsOnColumnHeader($grid, 7, 'EmbossLine2 (optional)\nIf 2nd Line Embossing is needed, specify the value here with no more than 19 characters and inform GTP that 2nd line embossing is requested for the order. (Note: not all vendors are able to emboss line 2)\nMax length 19.');
setTooltipsOnColumnHeader($grid, 8, 'Address1 (required)\nMax length 50.');
setTooltipsOnColumnHeader($grid, 9, 'Address2 (optional)\nMax length 50.');
setTooltipsOnColumnHeader($grid, 10, 'Address3 (optional)\nMax length 50.');
setTooltipsOnColumnHeader($grid, 11, 'City (required)\nMax length 50.');
setTooltipsOnColumnHeader($grid, 12, 'Country (required)\nSee CountryCodeList sheet for valid Country codes\nMax length 2.');
setTooltipsOnColumnHeader($grid, 13, 'State (required)\nSee StateCountryCodeList sheet for valid State/Country combinations.');
setTooltipsOnColumnHeader($grid, 14, 'PostalCode (optional)\nRequired for US addresses.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 15, 'DateOfBirth (required)\nMM/DD/YYY format.');
setTooltipsOnColumnHeader($grid, 16, 'EmailAddress (optional)\nMax length 100.');
setTooltipsOnColumnHeader($grid, 17, 'HomePhone (optional)\nPrefix with country code; no leading zeros.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 18, 'OfficePhone (optional)\nPrefix with country code; no leading zeros.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 19, 'MobilePhone (required)\nPrefix with country code; no leading zeros.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 20, 'Photo Reference (required for Photo Card orders.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 21, 'SalaryID (optional)\nCan be used for account or for picture id to map to a jpeg file.\nMax length 30.');
setTooltipsOnColumnHeader($grid, 22, 'SolID (required by some banks)\nFour digit value with leading zeros.');
setTooltipsOnColumnHeader($grid, 23, 'IDImage (optional)\nName of associated ID image file.');
_initialLoad = false;
} else
$('#txtCardCount').val($grid.getGridParam('records')); // - set the total card count
refreshIDImages();
if (_selectedConfiguration) {
ZapColumn($grid, 'SolID', _selectedConfiguration.MYISBRANCHIDREQ === 'N');
ZapColumn($grid, 'PhotoReference', !$('#cbPhotoID').prop('checked'));
}
if (_initialDataLoad) {
IsImageUploadValid();
$('#fileUploadOK').show(); // - display upload status
var setErrors = new GridErrors($grid);
setErrors.setEmboss = true;
setErrors.setPhotoReference = true;
setErrors.setSolID = true;
setErrors.execute();
}
var gridValid = IsGridValid();
ShowButtons(true, gridValid);
if (_initialDataLoad) {
ResetFilter(gridValid);
$grid.trigger('reloadGrid', [{ page: 1}]);
}
_initialDataLoad = false;
}
}).jqGrid('navGrid', '#pager', { refresh: false, search: false }, editSettings, addSettings, delSettings, {
multipleSearch: true,
overlay: false,
onClose: function(form) {
// if we close the search dialog while the datepicker is open
// the datepicker will stay opened. To fix this we have to hide
// the div used by datepicker
$('div#ui-datepicker-div.ui-datepicker').hide();
}
}).jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
beforeSearch: function() { return false; }
}); //.jqGrid('setFrozenColumns'); // - this freezes columns during horiz. scrolling
}
This is the data (kind of, just showing an example of ErrorCells)
Any advice appreciated, thanks.

The problem seems to me independent from the used jQuery version. The reason of described problem is the usage of old style filter
$.extend(postdata, { // - set filter condition
filters: '',
searchField: 'ErrorCells',
searchOper: 'ne',
searchString: '0'
});
instead of new-style filter
$.extend(postdata, { // - set filter condition
filters: JSON.stringify({
groupOp: "AND",
groups: [],
rules: [{field: "ErrorCells", op: "ne", data: "0"}]
})
});
or
$.extend(postdata, { // - set filter condition
filters: {
groupOp: "AND",
groups: [],
rules: [{field: "ErrorCells", op: "ne", data: "0"}]
}
});
By the way you use multipleSearch: true and the old style filter could not be displayed.
Nevertheless free jqGrid should in general work with old style filter too. I fixed the problem and posted the commit to GitHub. You need to download the latest sources from GitHub.
Thank you for reporting the bug!
Please verify that the problem is fixed with the latest sources, but after that I would recommend you to change the old-style filter to the new-style (see the code above).

Custom datetime picker in JQGRID

Hi bellow is my jqgrid code
function fechaReg(el) {
jQuery(el).datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
changeYear: true,
changeMonth: true,
numberOfMonths: 1,
timeOnlyTitle: 'Seleccione Horario',
timeText: 'Hora seleccionada',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
millisecText: 'Milisegundo',
currentText: 'Ahora',
closeText: 'Listo',
ampm: false
});
}
jQuery("#correspondence").jqGrid({
url: '../ajax/selectdata.php',
editurl: '../ajax/editdata.php',
mtype: 'post',
datatype: "json",
colNames: ['id', 'name', 'total_dept', 'Nombre', 'Fecha y Hora', 'Fecha', 'Hora', 'Consecutivo', 'Tipo de requerimiento', 'Tipo de medio', 'Tipo de Remitente', 'Detalle', 'Observaciones', 'Añadir propiedad', 'Añadir Area'],
colModel: [
{name: 'id', index: 'id', width: 20, align: "right", hidden: true,editable: false, editrules: {required: false}},
{name: 'name', index: 'name', width: 50, editable: true,hidden:true, sorttype: 'text', editrules: {required: true, edithidden: true}},
{name: 'id_corres_property', index: 'id_corres_property', width: 20, align: "right", hidden: true},
{name: 'total_dept', index: 'total_dept', width: 20, align: "right", hidden: true},
{name: 'date_time', index: 'date_time', width: 20, align: "right", hidden: true, editable: true, editoptions: {dataInit: fechaReg, readonly: 'readonly'}, editrules: {required: true, edithidden: true}, search: false},
{name: 'fecha', index: 'fecha', width: 50, editable: false, editrules: {required: true}, search: false},
{name: 'hora', index: 'hora', width: 50, editable: false, editrules: {required: true}, search: false},
{name: 'consecutivo', index: 'consecutivo', width: 55, editable: true, search: false},
{name: 'type', index: 'type', width: 60, editable: true, sorttype: 'text', editrules: {required: true}, edittype: 'select', editoptions: {value: {'': '-seleccione-', Normal: 'Normal', Queja: 'Queja', Reclamo: 'Reclamo', Juridico: 'Juridico',Derecho_de_peticion:'Derecho de peticion'}}},
{name: 'media', index: 'media', width: 50, editable: true, sorttype: 'text', editrules: {required: true}, edittype: 'select', editoptions: {value: {'': '-seleccione-', Email: 'Email', Personal: 'Personal', Mensajero: 'Mensajero', 'Correo certificado': 'Correo certificado', Fax: 'Fax', 'Pag. web': 'Pag. web'}}},
{name: 'sender_type', index: 'sender_type', width: '80', editable: true, editrules: {required: true}, edittype: 'select', editoptions: {value: {'': '-seleccione-', Owner: 'Propietario', Renter: 'Arrendatario', Management: 'Administración', Assignee: 'Codeudor', Garante: 'Apoderado'}},
stype: "select", searchoptions: {value: "*:Todo;Owner:Propietario;Renter:Inquilino;Management:Administración;Assignee:Codeudor;Garante:Apoderado", defaultValue: "*"}
},
{name: 'details', index: 'details', width: 80, editable: true},
{name: 'observations', index: 'observations', width: 80, editable: true, edittype: 'textarea', editoptions: {rows: "2", cols: "60"}},
{name: 'boton_person', index: 'boton_property', sortable: false, width: '50', align: "center", search: false},
{name: 'boton_office', index: 'boton_office', sortable: false, width: '50', align: "center", search: false}
],
gridComplete: function ()
{
var ids = jQuery("#correspondence").jqGrid('getDataIDs');
var allRowsInGrid = jQuery("#correspondence").jqGrid('getRowData');
for (var i = 0; i < ids.length; i++)
{
if (allRowsInGrid[i]['id_corres_property'])
{
aP = "<a class='cursorhand' onClick='setProperty(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_black.png' width='16' height='16' border='0' title='Añadir propiedad' /></a>";
}
else
{
aP = "<a class='cursorhand' onClick='setProperty(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_green.png' width='16' height='16' border='0' title='Añadir propiedad' /></a>";
}
jQuery("#correspondence").jqGrid('setRowData', ids[i], {boton_person: aP});
if (allRowsInGrid[i]['total_dept'] == 0)
{
aO = "<a class='cursorhand' onClick='setArea(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_green.png' width='16' height='16' border='0' title='Añadir Oficina' /></a>";
}
else
{
aO = "<a class='cursorhand' onClick='setArea(" + ids[i] + ")' style='cursor:pointer;'><img src='../../../admin/public/images/plus_black.png' width='16' height='16' border='0' title='Añadir Oficina' /></a>";
}
jQuery("#correspondence").jqGrid('setRowData', ids[i], {boton_office: aO});
}
},
width: "1100",
rowNum: 25,
rowList: [10, 20, 30, 40, 50],
pager: '#correspondence-pager',
sortname: 'id',
viewrecords: true,
gridview: true,
reloadAfterSubmit: true,
sortorder: "desc",
caption: " ..:: Correspondencia ::.. ",
search: true
});
jQuery('#correspondence').jqGrid('filterToolbar', {"stringResult": true, "searchOnEnter": false});
jQuery("#correspondence").jqGrid('navGrid', '#correspondence-pager', {edit: true, add: true, del: false, search: false},
{recreateForm: true, width: 500}, {recreateForm: true, width: 500}, {recreateForm: true}, {recreateForm: true}).navButtonAdd('#correspondence-pager', {
caption: "",
buttonicon: "ui-icon-disk",
onClickButton: function () {
var filter = {daterange: "fecha"};
exportFilter("correspondence", 'correspondance', filter);
},
position: "last"
});
My problem is this grid is working fine But I want to customize date time picker
Like if in add mode it should current date and time
But in edit mode it is inserted date and time .
I tried with this function also
function fechaReg(el) {
jQuery(el).datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
changeYear: true,
changeMonth: true,
numberOfMonths: 1,
timeOnlyTitle: 'Seleccione Horario',
timeText: 'Hora seleccionada',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
millisecText: 'Milisegundo',
currentText: 'Ahora',
closeText: 'Listo',
ampm: false
}).datetimepicker("setDate", new Date());
}
But it is getting current date and time all the time (in add and edit also)
please help me .
if any detail is left then feel free to ask
Thanks

Have you tried this way?
editoptions:
{
dataInit: function(el) {
setTimeout(function() {
fechaReg(el);
}, 200);
}
}

You can use setColProp method to display different date time picker in add and edit mode.
you need to create two function for that and in first function for add mode you can use your existing code to insert current datetime whereas in second function you can pass your custom format that you want.
jQuery('#' + jsonObj.grid.htmlTableId).jqGrid('setColProp', jsonObj.grid.editoptions[j].column_name, {
editoptions: {
dataInit: function(e){
}
}
});
By use of above code you can hook editoptions in loadComplete event of grid.

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