Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog
- by Dan
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.
