title: jqgrid hiddengrid doubles data and vertical scroll overlaps data
body: <p>I'm using jqgrid 4.4.4, and I seem to have come across a problem.</p>
  
  <p><strong>Problem 1: FIXED</strong></p>
  
  <p><strong>Use case</strong></p>
  
  <p><em>I want jqgrid to be hidden on "start-up" without doubling my data.</em></p>
  
  <p><strong>Solution</strong></p>
  
  <p>By removing scroll:true, the data did not double as it previously were.</p>
  
  <p><strong>Problem 2: FIXED</strong></p>
  
  <p>When the data exceeds the height of the jqgrid, a scroll bar appears. But the scrollbar overlaps the data as shown on the picture.</p>
  
  <p><img src="https://i.stack.imgur.com/5aiv6.png" alt="Jqgrid vertical scrollbar overlap"></p>
  
  <p>I have tried both autowidth:true, scrollOffset, defining a pixel width ++, but nothing seems to work.</p>
  
  <p>I'm working on a fairly huge project, and I love working with jqgrid. But I see it as a necessity to make these problems obsolete.</p>
  
  <p>Code:</p>
  
  <pre><code>    var grid = $("#table").jqGrid(
                  {       
                      datatype: "local",
                      height: "auto",
                      width: 1000,
                      scroll: true,
                      colNames:['','1992','1997','2002','2007',
                                '2012','2017','2022','2027','2032','2037'],
                      colModel: [{name:'Name',index:'Name', align: 'left'},
                                 {name:'Col0',index:'Col0'},{name:'Col1',index:'Col1'}
                                 {name:'Col2',index:'Col2'},{name:'Col3',index:'Col3'},
                                 {name:'Col4',index:'Col4'},{name:'Col5',index:'Col5'},
                                 {name:'Col6',index:'Col6'},{name:'Col7',index:'Col7'},
                                 {name:'Col8',index:'Col8'},{name:'Col9',index:'Col9'}],
                      multiselect: true,
                      caption: "Table",
                      shrinkToFit: true,
                      data: [{ Name: 'County1', Col0: '11 273', Col1: '11 431', 
                               Col2: '12 515', Col3: '13 414', Col4: '15 143',
                               Col5: '16  852', Col6: '18 362', Col7: '19 698', 
                               Col8: '20 821', Col9: '21 734' },
                             { Name: 'County2', Col0: '22 530', Col1: '24 457', 
                               Col2: '25 763', Col3: '27 247', Col4: '28 970', 
                               Col5: '31 135', Col6: '32 977', Col7: '34 649', 
                               Col8: '36 020', Col9: '37 158' },
                             { Name: 'County3', Col0: '11 909', Col1: '12 734', 
                               Col2: '14 037', Col3: '14 873', Col4: '17 284', 
                               Col5: '20 083', Col6: '22 877', Col7: '25 603', 
                               Col8: '28 064', Col9: '30 210' },
                             { Name: 'County4', Col0: '10 465', Col1: '12 165', 
                               Col2: '12 962', Col3: '13 890', Col4: '15 154', 
                               Col5: '16 293', Col6: '17 284', Col7: '18 174', 
                               Col8: '18 897', Col9: '19 446' },
                             { Name: 'County5', Col0: '13 300', Col1: '14 350', 
                               Col2: '15 777', Col3: '16 791', Col4: '17 809', 
                               Col5: '18 971', Col6: '19 931', Col7: '20 785', 
                               Col8: '21 452', Col9: '21 930' }]
                    //hiddengrid: true
                  }
              );
      CSS:
       .ui-jqgrid-bdiv {
         max-height:300px;
      }
  </code></pre>
  
  <p>JSFiddle that describes my problem:
  <a href="http://jsfiddle.net/aalmaas/3z7s7/2/" rel="nofollow noreferrer">http://jsfiddle.net/aalmaas/3z7s7/2/</a></p>
  
  <p>JSFiddle that shows exactly what I want: <a href="http://jsfiddle.net/aalmaas/LBfCV/" rel="nofollow noreferrer">http://jsfiddle.net/aalmaas/LBfCV/</a> . However, I want the jqgrid height to be set to "auto", not a definite height.</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>A huge thanks to Oleg for helping me out.</p>
  
  <p>The behaviour of the vertical scrollbar is different if you set a height of the jqgrid, and when you define it to be height:"auto".</p>
  
  <p>This is what I ended up doing:</p>
  
  <p>If there is a scroll bar visible, I first call setGridWidth to reduce the width of the grid with shrink parameter set to true. The width takes into account that there needs to be a space for the vertical scrollbar. Then I call setGridWidth one more time with shrink parameter set to false to restore the previous width of the grid. </p>