I have a jQueryUI dialog (#locDialog) which has a jqGrid ($grid) inside it. When the Dialog opens (initially, but it gets called whenever it opens), I want the $grid to resize to the size of the $locDialog. When I do this initially, I get scrollbars inside the grid (not inside the dialog).

If I debug the code, I see the width of the $grid is 677. So, I call setGridWidth() 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..)

When I rezie the dialog, I resize the grid as well, and everything is happy - no scrollbars, except where necessary.

My dialog init 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);
    }
});

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.

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.