Set column to show 0 in JqGrid - jqgrid

Question

I have a jqGrid.
my function is --
$("#grid").jqGrid({
url: "/Log/GetLogs",
datatype: 'json',
mtype: 'Get',
colNames: ['LogID', 'Agency Billing Code', 'License Number', 'Equipement Number', 'Year', 'Make', 'Model', 'Color', 'Begin Miles', 'End Miles'],
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
When the grid loads, database is returning the value of "Miles" but I don't want to show that. I just want to show 0, and when I edit the miles values it should map to Miles in my object.
Please let me know how can I achieve that?
Thanks..

Answer 1

To accomplish what you need you need to have a formatter and unformatter for the miles column. You have not specified on how you will be editing the grid row(Inline, form Edit, custom...etc) but I created inline edit as an example for you.
Here is a the complete solution in jsfiddle if you want to play with it. for editing just click the row and the miles will show its original value when on edit but show 0 on non edit mode. For more details on how formatting works see Here
var mileformatter= function (cellval, options, rowObject) {
return "<span data-val='"+cellval+"'>0</span>";
}
var mileUnFormat= function (cellvalue, options, cell) {
return $('span', cell).attr('data-val');
}
"use strict";
var mydata = [
{ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222},
{ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000},
];
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: 'Get',
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, formatter:mileformatter,unformat:mileUnFormat, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
onSelectRow: function (id) {
jQuery('#list').editRow(id, true);
}
});
Here is an edited answer for what you are looking for and a new jsfiddle link to play with Note that I removed the unformatter and also added beforeSaveRow function.
var onEdit=false;
var mileformatter= function (cellval, options, rowObject) {
if(onEdit==true)
{
return cellval;
onEdit=false;
}
return 0;
}
"use strict";
var mydata = [
{ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222},
{ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000},
];
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: 'Get',
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, formatter:mileformatter, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
onSelectRow: function (id) {
jQuery('#list').editRow(id,
{
"keys": true,
oneditfunc: function () {
},
"successfunc": function () {
alert('successfunc');
},
"url": null,
"extraparam": {},
"aftersavefunc": function () {
alert('aftersavefunc');
},
"errorfunc": null,
"afterrestorefunc": null,
"restoreAfterError": true,
"beforeSaveRow": function (options, rowid) {
onEdit=true;
jQuery("#list").saveRow(id, false);
return false;
}
});
}
});
You can customize the SaveRow as follows and put the post url of your own.
saveparameters = {
"successfunc" : null,
"url" : "yoururl",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
}
jQuery("#grid_id").jqGrid('saveRow',rowid, saveparameters);