Question

I create a new JQGrid with a supplied JSON data, it works fine for the first time:

// Clear it if it exists.
$("#grid_id").GridUnload();

// Create it with data          
var = jQuery("#grid_id").jqGrid({
    data: dataset_json,
    .....
    rowNum : 30,
    width : $("#grid_id").width(),
    height: $('#grid_id').height(),
    rowList : [ 30, 100, 150 ],
    pager : "#grid_page",
    sortname : 'name',
    viewrecords : true,
    sortorder : "desc",
    shrinkToFit: false,
    rownumbers: true,
    altRows:true,
    caption: "Sample Grid",
});

But When I fire this method for the second time with a returned dataset (Not null), the headers and content of grid are missed, and the entire grid goes something wrong. I’m not sure what cause this happen. And I guess whether the CSS cause it? I include the following CSS files:

<link href="${path}/duration/js/plus/alert/jquery.alerts.css" rel="stylesheet" type="text/css">
<link href="${path}/duration/css/subpage.css" rel="stylesheet" type="text/css"></link>
<link href="${path}/duration/css/shared.css" rel="stylesheet" type="text/css"></link>

If there is anyone who has ever encountered this issue give me guidance.

Answer 1

After trying for several times, I solved this issue. For my case, if grid need to have fixed width and height, and display horizontal scroll bar when its columns too many, just like following way to set the jqGrid:

grid= jQuery("#grid_id").jqGrid({
    width : 1000,
    height: 800,
    shrinkToFit: false,
});

The most important thing that makes sure the grid working no problem is that you SHOULD add THML configuration ‘align=”center”‘ to the table that the grid attaches.

<table id="grid_id" align="center"></table>

I don’t know why this solves it, but anyway, It works.

This is a issue similar with jqGrid horizontal scrolling issue.