Is there any way to resize a jqGrid when the browser window is resized? I have tried the method described here but that technique does not work in IE7.
Borrowing from the code at your link you could try something like this:
$(window).bind('resize', function() {
// resize the datagrid to fit the page properly:
$('div.subject').children('div').each(function() {
$(this).width('auto');
$(this).find('table').width('100%');
});
});
This way you're binding directly to the window.onresize event, which actually looks like what you want from your question.
If your grid is set to 100% width though it should automatically expand when its container expands, unless there are some intricacies to the plugin you're using that I don't know about.
The previous code shown in this post was eventually abandoned because it was unreliable. I am now using the following API function to resize the grid, as recommended by the jqGrid documentation:
jQuery("#targetGrid").setGridWidth(width);
To do the actual resizing, a function implementing the following logic is bound to the window's resize event:
Calculate the width of the grid using its parent's clientWidth and (if that is not available) its offsetWidth attribute.
Perform a sanity check to make sure width has changed more than x pixels (to work around some application-specific problems)
Finally, use setGridWidth() to change the grid's width
Here is example code to handle resizing:
jQuery(window).bind('resize', function() {
// Get width of parent container
var width = jQuery(targetContainer).attr('clientWidth');
if (width == null || width < 1){
// For IE, revert to offsetWidth if necessary
width = jQuery(targetContainer).attr('offsetWidth');
}
width = width - 2; // Fudge factor to prevent horizontal scrollbars
if (width > 0 &&
// Only resize if new width exceeds a minimal threshold
// Fixes IE issue with in-place resizing when mousing-over frame bars
Math.abs(width - jQuery(targetGrid).width()) > 5)
{
jQuery(targetGrid).setGridWidth(width);
}
}).trigger('resize');
Been using this in production for some time now without any complaints (May take some tweaking to look right on your site.. for instance, subtracting the width of a sidebar, etc)
The main answer worked for me but made the app extremely unresponsive in IE, so I used a timer as suggested. Code looks something like this ($(#contentColumn) is the div that the JQGrid sits in):
function resizeGrids() {
var reportObjectsGrid = $("#ReportObjectsGrid");
reportObjectsGrid.setGridWidth($("#contentColumn").width());
};
var resizeTimer;
$(window).bind('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeGrids, 60);
});
Hello Stack overflow enthusiasts. I enjoyed most of answers, and I even up-voted a couple, but none of them worked for me on IE 8 for some strange reason... I did however run into these links... This guy wrote a library that seems to work. Include it in your projects in adittion to jquery UI, throw in the name of your table and the div.
var $targetGrid = $("#myGridId");
$(window).resize(function () {
var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is generated by jqGrid.
$targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here?
});
