Question

I encountered a strange problem during using jQuery’s JQGrid, following fragment code is for creating it:

grid= jQuery("#grid_id").jqGrid({
    data : response.list,
    datatype : "local",
    colNames : columnNames,
    colModel : [ {....}],                       
    rowNum : 30,
    width : $("#grid_id").width(),
    height: $("#grid_page").height(),
    rowList : [ 30, 100, 150 ],
    pager : "#grid_page",
    sortname : 'name',
    viewrecords : true,
    sortorder : "desc",
    shrinkToFit: false,
    rownumbers: true,
    altRows:true,
    caption: "Sample Grid"
});

This issue has 3 symptoms:

1, This grid has more than 35 columns and the width of each column is greater than 100 PX, and this grid’s width is fixed in 1000PX, so the grid displays a scroll bar for user to view all columns. (As you see, I set the grid width and height with fixed values)

2, This grid works well for the first time, but the headers and content of it missed when it has been updated for the second time or later.

3, I am attempting to comment the width setting, in other words, I didn’t set a width to this grid, it works fine no matter whether it is for first time or second, but the width of grid is the sum of all columns (3500PX), it expand the whole page ugly.

grid= jQuery("#grid_id").jqGrid({
    data : response.list,
    datatype : "local",
    colNames : columnNames,
    colModel : [ {....}],                       
    rowNum : 30,
    // width : $("#grid_id").width(), COMMENT it.
    height: $("#grid_page").height(),
    rowList : [ 30, 100, 150 ],
    pager : "#grid_page",
    sortname : 'name',
    viewrecords : true,
    sortorder : "desc",
    shrinkToFit: false,
    rownumbers: true,
    altRows:true,
    caption: "Sample Grid"
});

So the question I want to ask is: What’s the best solution for setting the width and height to a jQuery JQGrid? How should set them to my grid?

Simply, how to have a grid that has many columns works with a X scrollbar?

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.