Question

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, 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,

Answer 1

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.