title: Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog
body: <p>I have a jQueryUI dialog (<code>#locDialog</code>) which has a jqGrid (<code>$grid</code>) inside it.  When the Dialog opens (initially, but it gets called whenever it opens), I want the <code>$grid</code> to resize to the size of the <code>$locDialog</code>.  When I do this initially, I get scrollbars inside the grid (not inside the dialog).</p>
  
  <p>If I debug the code, I see the width of the <code>$grid</code> is 677.  So, I call <code>setGridWidth()</code> again and check the width and now I have 659, which is 18px less, which is the size of the scroll area for the jqGrid (Dun-dun-dun..)</p>
  
  <p>When I rezie the dialog, I resize the grid as well, and everything is happy - no scrollbars, except where necessary.</p>
  
  <p>My dialog init code:</p>
  
  <pre><code>$locDialog = $('#location-dialog').dialog({
      autoOpen: false,
      modal: true,
      position: ['center', 100],
      width: 700,
      height:500,
      resizable: true,
      buttons: {
                  "Show Selected": function() {alert($('#grid').jqGrid('getGridParam','selarrrow'));},
                  "OK": function() {$(this).dialog('close');},
                  "Cancel": function() {$(this).dialog('close');}
               },
      open: function(event, ui) {
          $grid.setGridHeight($(this).height()-54); 
            // No idea why 54 is the magic number here
          $grid.setGridWidth($(this).width(), true);
      },
      close: function(event, ui) {
  
      },
      resizeStop: function(event, ui) {
          $grid.setGridWidth($locDialog.width(), true);
          $grid.setGridHeight($locDialog.height()-54);
      }
  });
  </code></pre>
  
  <p>I am curious if anyone has seen this before.  Really, it isn't the end of the world if I initially have unnecessary scrollbars at first, but it is just odd that when I call setGridWidth initially, it doesn't take into account the scroll area of 18px.</p>
  
  <p>As far as the magical number 54, that is the number I had to subtract from the height of the dialog value to get the grid to render without unnecessary scrollbars.</p>
  
  <hr>
  
  <p>I think it may be a timing issue, though this doesn't make a lot of sense.  Perhaps I should call an event once the grid is completely loaded.  This may ensure it calculates its width correctly.</p>