I tried to figure out what's wrong with current test code I've played with jqGrid free. I have evaluated a few and I have to pick jqGrid as it is so flexible to use it. However, I have this issue, so I'm not sure whether or not it comes from the js set I'm using or something else since I'm doing it a little bit differently. I'm using inline editing. And weird as it is, it displays nicely in IE 11 and horribly in Chrome Version 61.0.3163.100 (Official Build) (32-bit). Here is my code
<html>
<head>
<title>Test jqGrid free</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css ">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script>
<script type="text/javascript">
var URL = 'group.json';
$.extend(true, $.jgrid.inlineEdit, {
});
$.extend($.jgrid.defaults, {
datatype: 'json',
jsonReader : {
repeatitems:false
},
height: 'auto',
viewrecords: true,
rowList: [10, 20, 30],
altRows: true,
loadError: function(xhr, status, error) {
alert(error);
}
});
jQuery.extend(
jQuery.jgrid.edit, {
closeAfterEdit: true,
closeAfterAdd: true,
ajaxEditOptions: { contentType: "application/json" },
mtype: 'PUT',
EditData: function(postData) {
return JSON.stringify(postData);
}
}
);
$(document)
.ready(
function() {
$("#list")
.jqGrid(
{
url : URL,
datatype : 'json',
mtype : 'GET'
,
serializeRowData: function (postdata) {
var json = JSON.stringify(postdata);
return json;
},
colNames : ['Code', 'Name','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
colModel : [
{
name : 'projectCode',
index : 'projectCode',
width : 70,
editable : false
}, {
name : 'projectName',
index : 'projectName',
width : 120,
editable : false
}, {
name : 'january',
index : 'january',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'february',
index : 'february',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'march',
index : 'march',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'april',
index : 'april',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'may',
index : 'may',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'june',
index : 'june',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'july',
index : 'july',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'august',
index : 'july',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'september',
index : 'september',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'october',
index : 'october',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'november',
index : 'november',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'december',
index : 'december',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
} ],
iconSet: "fontAwesome",
rownumbers: true,
pager : '#pager',
rowNum : 25,
rowList : [ 10, 20, 30 ],
grouping: true,
groupingView: {
groupField: ["projectName"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [true],
groupCollapse: false
},
viewrecords : true,
caption : 'Test',
editurl: URL,
editable: true,
datatype : 'json',
}
)
.jqGrid('navGrid', '#pager',
{
edit : false,
add : false,
del : false,
search : false
}
)
;
function reload(rowid, result) {
console.log('inside reload');
$("#list").trigger("reloadGrid");
};
var reloadGridFunc = function () {
var $self = $(this);
setTimeout(function () {
$self.setGridParam({ datatype: 'json' });
$self.trigger("reloadGrid");
}, 500);
};
var editoptions = {
keys: true,
mtype: "PUT",
url: URL + '/1',
successfunc: reloadGridFunc
};
jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[
{startColumnName: 'projectCode', numberOfColumns: 2, titleText: '<em>Project</em>'},
{startColumnName: 'january', numberOfColumns: 12, titleText: 'Calendar'}
]
}),
jQuery("#list").jqGrid("inlineNav", "#pager", {
add:true,
edit:true,
save:true,
addParams: {
position: "last",
addRowParams: editoptions
},
editParams: editoptions
});
})
;
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
</script>
</head>
<body>
<br/> <br/>
<div id="pager"></div>
<table id="list"></table>
<br>
</body>
</html>
Below are the images for IE and Chrome IE: Good diplay
Chrome : Not quite expected display as for IE
As for json data , I use it like below:
{
"rows":
[
{"projectCode":"A","projectName":"Project A","january":1.0,"february":0.0,"march":0.0,"april":0.0,"may":0.0,"june":0.0,"july":0.0,"august":0.0,"september":0.0,"october":0.0,"november":0.0,"december":1.0}
]
}
Did I overlook something?
