Question

I have a button displayed in the jqGrid scrollOffset area as seen in my first screenshot. But you’ll notice in the second screenshot when there isn’t enough results to fill the grid the scrollbars disappear and the scrollOffset area goes with it. Is there a way to trick jqGrid into always displaying the scrollOffset area.

Answer 1

If I understand you correct you can include the following CSS which will force creating the scroll-bars

<style type="text/css">
    .ui-jqgrid .ui-jqgrid-bdiv { overflow: scroll; }
</style>

UPDATED: I looked in your demo from here. I don’t like your customization of the searching toolbar of jqGrid and the column headers because you add additional column in the grid header, which not exist in the body of grid and which jqGrid don’t know. I find the way too dangerous.

I would recommend you to use toppager: true parameter instead. In your current code you use “keyword-grid” as the grid id and “keyword-grid-toolbar” as the pager. If you would use toppager: true option you will din’t need <div id="keyword-grid-toolbar"> at all. Instead of that jqGrid will create the div for the top pager itself. The id of the grid will be constructed from the grid id and the text “_toppager”. In you case it will be the div with id=”keyword-grid_toppager”.

So you should remove pager: "#keyword-grid-toolbar" parameter of jqGrid and replace '#keyword-grid-toolbar' to '#keyword-grid_toppager' for navGrid and navButtonAdd which you use.

You can read here and here more information about the toppager.

As the result you will have not the same look of jqGrid of course, but the height of the grid will be not changed and the searching and column chooser buttons will be on top and are always visible. So all your main problems will be solved and you will have standard jqGrid.

UPDATED 2: One more approach which you can follow is to add a column at the end of jqGrid and make it hidden by

{name: 'last', width: 22, sortable: false, resizable: false, search: false,
    cellattr: function () {return ' style="display: none"'} }

instead of typical hidden: true. It will preserve some place in the column header and the searching toolbar. So you will be able to add some your custom elements without breaking general grid structure:

see the demo here.