JQgrid 4.8 column widths not working in IE9

Question

I was updating my jqGrid from 4.4.5 to 4.8.2 and noticed that the column widths stopped working (in IE9). The width in the grid just wrapped the text that was in that column. I found this thread : (jqgrid not work on IE8) and the only demo that worked was the demo46. I put a copy of my grid below to see if it needs to be changed to fix the problem.

var myColNames = ['ID', 'Name'];
var myColModel = [
    { name: 'ID', index: 'ID', width: 50, key: true, hidden: false, editable: true },
    { name: 'Name', index: 'Name', width: 150, key: true, hidden: false, editable: true },   
];

grid.jqGrid({
    url: URL,
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    colNames: myColNames,
    colModel: myColModel,
    loadonce: true, // enables sorting on client side
    hidegrid: false, // disable ^ button to show/hide
    ignoreCase: true, // client side sorting and filtering becomes case insensitive
    rowNum: gridRows, // number of rows to display per page
    height: 'auto',
    rowList: [10, 20, 50, 100, 500], // drop down for number of rows to display per page
    pager: pagerName, // name of pager div to display the pager in
    altRows: true,
    altclass: 'AIMAltRow',
    viewrecords: true,
    shrinkToFit: false, // enable scrolling of headers
    gridview: true,
    sortname: 'ID',
    sortorder: 'desc',
    rownumbers: true,
});

Answer 1

It was really problems with IE8 compatibility in jqGrid 4.7 and so free jqGrid 4.8 too. I can't say nothing about Guriddo jqGrid JS 4.8 or Guriddo jqGrid JS 4.8.2, but the problems are solved in free jqGrid. I added the demo in the answer which you reference. The last demo uses the current (post free jqGrid 4.8) code. I don't know any problems in IE8/IE9. Just try it.

If you want to try the new free jqGrid code by including direct links to the GitHub code (see the wiki article):

<link href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" rel="stylesheet">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>

I recommend you to include additionally

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

and add new jqGrid iconSet: "fontAwesome". You will see that the look of the grid will be better especially if you use zoom in the web browser. See more details about the usage of Font Awesome in wiki.

You can download the code from github. It contains jquery.jqgrid.min.js, jquery.jqgrid.src.js, jquery.jqgrid.min.map, ui.jqgrid.css (or ui.jqgrid.min.css) and all different language specific locales.

By the way, the small code which you posted contains important errors. You use key: true in two columns, which is wrong. One can place key: true in one column only. Another bug is the usage of , after the last parameter (rownumbers: true). It produce syntax error in IE8.

Answer 2

Updated to new ui.jqgrid.css that fixed it. thanks for recommendations from Oleg