jqGrid: how to add horizontal toolbar

jqGrid is created in web page. If page width is decreased, rightmost columns are no more accessible. How to add horizontal scrollbar to jqGrid so that if page width is small,开发者_StackOverflow jqGrid can scrolled horizontally to allow access to all columns ?

          grid.jqGrid({
            url: '<%= ResolveUrl("~/Grid/GetData?_entity=Strings")%>',
            datatype: "json",
            mtype: 'POST',
            scroll: 1,
            autoencode: true,

            height: 350,
            autowidth: true,

---

You can try a similar approach but in this case you'll make use of the grid's scrollbars instead of the div overflow.

The idea is to resize the grid itself causing it to show scrollbars if its bouderies are smaller than its content. For this to work correctly the columns must have the option fixed:true otherwise they will resize themselfs to fit the grid's width.

Declare the DOM as follows:

<div id="grid1container" style="width: 100%;">
    <table id="grid1"></table>
    <div id="grid1pager"></div>
</div>

Then add the javascrip code to the page:

$(window).resize(function () { ResizeGrid1() });
function ResizeGrid1() {
    $('#grid1container').height($(window).height() - 55);

    $('#grid1').jqGrid()
        .setGridWidth($('#grid1container').width() - 2)
        .setGridHeight($('#grid1container').height());
}

Here I'm manipulating the grid's height too, if you don't want it just remove the setGridHeight line.

---

I've found this solution but its not perfec as in FF4 the window stops reporting width resize bellow 535px... couldn't figure out why.

My idea was to wrap the grid inside a DIV and set it to overflow: auto; width: 100%

<div id="grid1container" style="width: 100%; overflow: auto;">
    <table id="grid1"></table>
    <div id="grid1pager"></div>
</div>