How do I hide the horizontal scroll bar on a jqGrid sub-grid?

So I have a minor display problem with the jqGrid. I can't claim that it's a bug, per-se, but it confuses my users and so I have been asked to deal with it - but it seems to be getting the better of me.

I am using sub-grids, where expanding a parent grid row causes a sub-grid to be loaded (see code below). I have simplified the whole config to make it easier to read, mostly by just removing all but one column and keeping the colModel simple. The parent grid has a horizontal scroll bar to be able to scroll right-to-left to see data that might not be on the screen. When the screen is large enough to display all of the data, the horizontal scroll bar on the parent grid dissappears.

When the sub-grid loads, it loads with a width of 100%, which works out great. The parent grid expands to allow the entire sub-grid to display and the parent grid's horizontal scroll bar allows you to scroll back and forth to see all of the data. There is one scroll bar for all horizontal scrolling, regardless of if or how many sub-grids are displayed.

Unfortunatly, the sub-grid also displays a horizontal scroll bar - but since the grid width is 100%, this scroll bar doesn't "do" anything - excet confuse the user into thinking there is no more data to see when they try to use it to scroll and nothing moves.

Is there any way through jqGrid configuration or CSS "magic" that I can hide this horizontal scroll bar on the sub-grid? I have used the Chrome dev tools, but there doesn't seem to be a DIV tag associated specifically with the scroll bar, just the title, header and data rows.

Versions:

• jQuery :     1.4.2
• jQueryUI :  1.8.5
• jqGrid :      3.8.1
• Browsers : Chrome 8, IE 8

jQuery(document).ready(function () {
    jQuery('#ParentGrid').jqGrid({
        url: '[URL TO GET DATA]',
        width: '100%',
        height: '100%',
        shrinkToFit: 'false',
        datatype: 'json',
        mtype: 'POST',
        jsonReader: { repeatitems: false },
        sortname: 'ParentRowID',
        sortorder: 'asc',
        colNames: [
            'Parent Row ID'
        ],
        colModel: [
            { name: 'ParentRowID', index: 'ParentRowID', width: 110, align: 'left' }
        ],
        gridComplete: function () {
            $('.ui-jqgrid-titlebar-close', '#ParentGrid').remove();
        },            
        subGrid: true,
        subGridRowExpanded: function (subgrid_id, row_id) {
            var subgrid_table_id = subgrid_id + '_t';
            $('#' + subgrid_id).html("<table id='" + subgrid_table_id + "' cellpadding='0' cellspacing='0'></table>");
            $('#' + subgrid_table_id).jqGrid({
                url: '[URL TO GET DATA BASED ON PARENT GRID SELECTED ROW ID]',
                width: '100%',
                height: '100%',
                shrinkToFit: 'false',
                datatype: 'json',
                mtype: 'POST',
                jsonReader: { repeatite开发者_Go百科ms: false },
                sortname: 'ChildRowID',
                sortorder: 'asc',
                colNames: [
                    'Child Row ID'
                ],
                colModel: [
                    { name: 'ChildRowID', index: 'ChildRowID', width: 110, align: 'left' }
                ],
                gridComplete: function () {
                    $('.ui-jqgrid-titlebar-close', '#' + subgrid_table_id).remove();
                }
            });
        }
    });
});

I have the same problem, and i has been solved it by add css. You can do like this:

#ParentGrid .ui-jqgrid-bdiv{
        overflow-x:hidden;
    }

Give pagination and increase the height of the results grid so that vertical scroll bar will be removed. This in turn removes the horizontal scroll bar too.