title: Horizontal scroll bar in jqgrid when needed
body: <p>I have a jqgrid where there are 19 columns, I want to display full column headers and have a horizontal scroll bar (only when the the header columns exceed the <code>mainWidth</code>)</p>
  
  <p>This is how I get my grids, but as you can see in <strong>Database Version</strong> panel all the 5 header columns are visible i want similar thing in <strong>Database Release</strong> panel but in this case as it will increase the width of the container so a horizontal scroll bar should appear displaying all the columns</p>
  
  <p><img src="https://i.stack.imgur.com/DkUHx.png" alt="enter image description here"></p>
  
  <p>Below is my code for the jqgrid</p>
  
  <pre><code>    var mainWidth=jQuery('#detailTable').width();
  
      panels+='&lt;div title="Database Release" class="class"&gt;'+
                  '&lt;div class="jqUIDiv" style="width:'+mainWidth+'px; overflow-x:auto;"&gt;'+
                      '&lt;table id="tblOrsDatabaseRelease" width="100%"&gt;&lt;/table&gt;'+
                      '&lt;div id="OrsDatabaseReleaseGridpager"&gt;&lt;/div&gt;'+
                  '&lt;/div&gt;'+
              '&lt;/div&gt;';
  
      $('#detailTable').empty();
      $('&lt;div&gt;')
      .html('&lt;div class="titleBlue"&gt;ORS Information&lt;/div&gt;'+panels)
      .appendTo('#detailTable').delay(10).queue(function(){
          $('.class').jPanel({
              'effect'    : 'fade',
              'speed'     : 'slow',
              'easing'    : 'swing'
          });
      });
  </code></pre>
  
  <p>I am using <a href="http://plugins.jquery.com/project/jPanel" rel="nofollow noreferrer">JPanel</a> (collapsible panels) above</p>
  
  <pre><code>    //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&lt;orsDbRelease.length;i++)
          jQuery("#tblOrsDatabaseRelease").jqGrid('addRowData',i+1,orsDbRelease[i]);
      jQuery("#tblOrsDatabaseRelease").setGridParam({rowNum:10}).trigger("reloadGrid
  </code></pre>
  
  <p>I used <a href="https://stackoverflow.com/questions/2686043/correctly-calling-setgridwidth-on-a-jqgrid-inside-a-jqueryui-dialog/2696776#2696776">Oleg's answer</a> to get the below function</p>
  
  <pre><code>    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 &gt; 0) {
              var hdivScrollWidth = htable[0].scrollWidth;
              if ((gridScrollWidth &lt; hdivScrollWidth))
                  scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
          }
          if (gviewScrollWidth != scrollWidth || scrollWidth &gt; mainWidth) {
              var newGridWidth = (scrollWidth &lt;= 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);
          }
      };
  </code></pre>