I am new to jqGrid and I tried to implement inline editing on the same. i could see no error but the rows are not edited and the grid will be in "saving" mode forever once i click submit button. please shed some light on where I am going wrong.
<script type="text/javascript">
$(document).ready(function () {
jQuery("#tabl").jqGrid({
url: "UserDetails.aspx/GetAllRecords",
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
//alert(postData);
//alert(JSON.stringify(postData));
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) {
//alert(JSON.stringify(obj.d));
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
},
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
id: '0',
cell: '',
caption: "",
repeatitems: false
},
colNames: ['Category', 'ParamCode', 'ParamName', 'Description', 'DefaultValue', 'CompId', 'SiteId', 'SysTerminal', 'UserId', 'LastUpdateDt'],
colModel: [
{ name: 'Category' },
{ name: 'ParamCode' },
{ name: 'ParamName' },
{ name: 'Description' },
{ name: 'DefaultValue' },
{ name: 'QueryCompId', formatter: 'checkbox' },
{ name: 'QuerySiteId', formatter: 'checkbox' },
{ name: 'QuerySysTerminal', formatter: 'checkbox' },
{ name: 'QueryUserId', formatter: 'checkbox' },
{ name: 'LastUpdateDt', formatter: 'date' }
],
multiselect: false,
height: 'auto',
autoencode: true,
rowList: [10, 20, 30],
rowNum: 10,
pager: '#pager',
loadonce: true,
viewrecords: true,
gridview: true,
caption: "",
onCellSelect: function (rowid, iCol, cellcontent, e) {
pCode = cellcontent;
jQuery("#tablParamValues").jqGrid({
url: "UserDetail.aspx/GetParamValues",
editurl: "UserDetail.aspx/EditParamValue",
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
//alert(JSON.stringify(postData));
return JSON.stringify({ paramcode: pCode });
},
jsonReader: {
root: function (obj) {
//alert(JSON.stringify(obj.d));
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
},
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
id: '0',
cell: '',
caption: "Manipulating Array Data",
repeatitems: false
},
colNames: ['ParamValueId', 'ParamCode', 'CompId', 'SiteId', 'SysTerminal', 'UserId', 'ParamValue'],
colModel: [
{ name: 'ParamValueId', index: 'ParamValueId' },
{ name: 'ParamCode' },
{ name: 'CompId' },
{ name: 'SiteId' },
{ name: 'SysTerminal' },
{ name: 'UserId' },
{ name: 'ParamValue', index: 'ParamValue', editable: true }
],
multiselect: false,
height: 'auto',
autoencode: true,
rowList: [10, 20, 30],
rowNum: 10,
pager: '#pager2',
loadonce: false,
viewrecords: true,
gridview: true,
caption: "",
ajaxRowOptions: {
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
serializeRowData: function (postdata) {
for (propertyName in data) {
if (data.hasOwnProperty(propertyName)) {
propertyValue = data[propertyName];
if ($.isFunction(propertyValue)) {
dataToSend[propertyName] = propertyValue();
} else {
dataToSend[propertyName] = propertyValue;
}
}
}
return JSON.stringify(dataToSend);
}
}).trigger("reloadGrid").inlineNav('#pager2', { edit: true, add: false, del: false, search: false },
{
ajaxEditOptions: { type :"POST",
contentType :"application/json; charset=utf-8",
dataType :"json"
},
serializeEditData: function createJSON(postdata) {
if (postdata.id === '_empty')
postdata.id = null;
return JSON.stringify(postdata)
},
closeAfterEdit: true
}).jqGrid('filterToolbar', { autoSearch: true });
//set width of grid
jQuery("#tablParamValues").jqGrid('setGridWidth', '700');
}
}).navGrid('#pager', { edit: false, add: false, del: false, search: false })
.jqGrid('filterToolbar', { autoSearch: true });
jQuery("#tabl").jqGrid('setGridWidth', '700');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
jQuery("#tblData").jqGrid({
url: "CurrencySetting.aspx/GetAllRecords",
editurl:"CurrencySetting.aspx/EditRecord",
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
//alert(postData);
//alert(JSON.stringify(postData));
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) {
//alert(JSON.stringify(obj.d));
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
},
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
id: '0',
cell: '',
caption: "",
repeatitems: false
},
colNames: ['Cd', 'Ds', 'Culture', 'DecimalPlaces', 'ShortDescription', 'Rate', 'Symbol', 'DateTimeFormat'],
colModel: [
{ name: 'Cd', formoptions: { rowpos: 1, colpos: 1} },
{ name: 'Ds', formoptions: { rowpos: 1, colpos: 2} },
{ name: 'Culture', formoptions: { rowpos: 1, colpos: 3}, },
{ name: 'DecimalPlaces', formoptions: { rowpos: 2, colpos: 1} },
{ name: 'ShortDescription', formoptions: { rowpos: 2, colpos: 2} },
{ name: 'CurrencyRate', formoptions: { rowpos: 2, colpos: 3} },
{ name: 'Symbol', formoptions: { rowpos: 3, colpos: 1} },
{ name: 'DateTimeFormat', formoptions: { rowpos: 3, colpos: 2} }
],
cmTemplate: { editable: true },
multiselect: false,
height: 'auto',
autoencode: true,
rowList: [10, 20, 30],
rowNum: 10,
pager: '#pager',
loadonce: true,
viewrecords: true,
gridview: true,
sortable: true,
caption: "",
loadComplete: function () {
// alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
// alert(jqXHR.status + textStatus + errorThrown);
//alert(jqXHR.responseText);
}
}).navGrid('#pager', { edit: true, add: true, del: true, search: false },
{
ajaxEditOptions: { type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
serializeEditData: function createJSON(postdata) {
if (postdata.id === '_empty')
postdata.id = null;
return JSON.stringify({id:'AED',decPlace:'10'})
},
closeAfterEdit: true}
) .jqGrid('filterToolbar', { autoSearch: true });
//set width of grid
jQuery("#tblData").jqGrid('setGridWidth', '700');
$.extend($.jgrid.view, { width: 450, recreateForm: true });
$.extend($.jgrid.edit, { width: 450, recreateForm: true });
$.extend($.jqgrid.del, {width:300, recreateform:true});
});
$(window).on("resize", function () {
var newWidth = $("#tblData").closest(".ui-jqgrid").parent().width();
$("#tblData").jqGrid("setGridWidth", newWidth, true);
});
</script>
