Barre de défilement horizontale dans jqgrid cas de besoin

J'ai un jqgrid où il y a 19 colonnes, je veux afficher en plein en-têtes de colonne et avoir une barre de défilement horizontale (uniquement lorsque le l'en-tête des colonnes de dépasser le mainWidth)

C'est de cette façon je reçois mes grilles, mais comme vous pouvez le voir dans Version de Base de données panneau tous les 5 en-tête de colonnes sont visibles je veux chose de similaire dans Base de données de presse panneau, mais dans ce cas, car il permettra d'augmenter la largeur du récipient, une barre de défilement horizontale doit apparaître l'affichage de toutes les colonnes

Ci-dessous mon code pour le jqgrid

    var mainWidth=jQuery('#detailTable').width();

    panels+='<div title="Database Release" class="class">'+
                '<div class="jqUIDiv" style="width:'+mainWidth+'px; overflow-x:auto;">'+
                    '<table id="tblOrsDatabaseRelease" width="100%"></table>'+
                    '<div id="OrsDatabaseReleaseGridpager"></div>'+
                '</div>'+
            '</div>';

    $('#detailTable').empty();
    $('<div>')
    .html('<div class="titleBlue">ORS Information</div>'+panels)
    .appendTo('#detailTable').delay(10).queue(function(){
        $('.class').jPanel({
            'effect'    : 'fade',
            'speed'     : 'slow',
            'easing'    : 'swing'
        });
    });

Je suis en utilisant Composite (pliable panneaux) ci-dessus

    //Master Database Release
jQuery("#tblOrsDatabaseRelease").jqGrid({
datatype: "clientSide",
colNames:['Debug Ind','Debug File Path','Debug Level','Debug File Name','LOG_FILE_SIZE','LOG_FILE_NUMBER','TNS_NAME','CONNECTION_PORT','ORACLE_SID','DATABASE_HOST','SCHEMA_WRITE_LOCK_DISABLED_IND','COLUMN_LENGTH_IN_BYTES_IND','MTIP_REGENERATION_REQUIRED_IND','GLOBAL_NOLOGGING_IND','PRODUCTION_MODE_IND','LAST_CHANGE_DATE','API_BATCH_INTEROP_IND','ZDT_IND','WORKFLOW_ENGINE_NAME'],
colModel:[
{name:'debugInd',index:'debugInd', align:"left"},   
{name:'debugFilePath',index:'debugFilePath', align:"left"},
{name:'debugLevel',index:'debugLevel', align:"left"},
{name:'debugFileName',index:'debugFileName', align:"left"},
{name:'LOG_FILE_SIZE',index:'LOG_FILE_SIZE', align:"left"},
{name:'LOG_FILE_NUMBER',index:'LOG_FILE_NUMBER', align:"left"},
{name:'TNS_NAME',index:'TNS_NAME', align:"left"},
{name:'CONNECTION_PORT',index:'CONNECTION_PORT', align:"left"},
{name:'ORACLE_SID',index:'ORACLE_SID', align:"left"},
{name:'DATABASE_HOST',index:'DATABASE_HOST', align:"left"},
{name:'SCHEMA_WRITE_LOCK_DISABLED_IND',index:'SCHEMA_WRITE_LOCK_DISABLED_IND', align:"left"},
{name:'COLUMN_LENGTH_IN_BYTES_IND',index:'COLUMN_LENGTH_IN_BYTES_IND', align:"left"},
{name:'MTIP_REGENERATION_REQUIRED_IND',index:'MTIP_REGENERATION_REQUIRED_IND', align:"left"},
{name:'GLOBAL_NOLOGGING_IND',index:'GLOBAL_NOLOGGING_IND', align:"left"},
{name:'PRODUCTION_MODE_IND',index:'PRODUCTION_MODE_IND', align:"left"},
{name:'LAST_CHANGE_DATE',index:'LAST_CHANGE_DATE', align:"left"},
{name:'API_BATCH_INTEROP_IND',index:'API_BATCH_INTEROP_IND', align:"left"},
{name:'ZDT_IND',index:'ZDT_IND', align:"left"},
{name:'WORKFLOW_ENGINE_NAME',index:'WORKFLOW_ENGINE_NAME', align:"left"}
],
pagination:true,
pager : '#OrsDatabaseReleaseGridpager',
rowNum:10,
rowList:[10,50,100],
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
edit:false,
add:false,
del:false,
loadComplete: function() {
var gr = jQuery('#tblOrsDatabaseRelease');
fixGridWidth(gr);
}
});
for(var i=0;i<orsDbRelease.length;i++)
jQuery("#tblOrsDatabaseRelease").jqGrid('addRowData',i+1,orsDbRelease[i]);
jQuery("#tblOrsDatabaseRelease").setGridParam({rowNum:10}).trigger("reloadGrid

J'ai utilisé Oleg réponse pour obtenir le dessous de la fonction

    var fixGridWidth = function (grid) {
var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
var mainWidth = jQuery('#detailTable').width();
var gridScrollWidth = grid[0].scrollWidth;
var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
var scrollWidth = gridScrollWidth;
if (htable.length > 0) {
var hdivScrollWidth = htable[0].scrollWidth;
if ((gridScrollWidth < hdivScrollWidth))
scrollWidth = hdivScrollWidth; //max (gridScrollWidth, hdivScrollWidth)
}
if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;  //min (scrollWidth, mainWidth)
//if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
if (newGridWidth != gviewScrollWidth)
grid.jqGrid("setGridWidth", newGridWidth);
}
};