Resize jqGrid when browser is resized?

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.

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)

$(window).bind('resize', function() {
    $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');

As a follow-up:

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');

And example markup:

<div id="grid_container">
    <table id="grid"></table>
    <div id="grid_pgr"></div>
</div>

Auto resize:

For jQgrid 3.5+

        if (grid = $('.ui-jqgrid-btable:visible')) {
            grid.each(function(index) {
                gridId = $(this).attr('id');
                gridParentWidth = $('#gbox_' + gridId).parent().width();
                $('#' + gridId).setGridWidth(gridParentWidth);
            });
        }

For jQgrid 3.4.x:

       if (typeof $('table.scroll').setGridWidth == 'function') {
            $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div)
            if (gridObj) {

            } else {
                $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) {
                    grid = $(this).children('table.scroll');
                    gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight;
                    grid.setGridWidth(gridParentWidth, true);
                });
            }
        }

this seems to be working nicely for me

$(window).bind('resize', function() {
	jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');

I'm using 960.gs for layout so my solution is as follows:

	$(window).bind(
		'resize',
		function() {
                    //  Grid ids we are using
			$("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth(
					$(".grid_5").width());
			$("#clinteamgr, #procedgr").setGridWidth(
					$(".grid_10").width());
		}).trigger('resize');
// Here we set a global options

jQuery.extend(jQuery.jgrid.defaults, {
	// altRows:true,
	autowidth : true,
	beforeSelectRow : function(rowid, e) { // disable row highlighting onclick
		return false;
	},
	datatype : "jsonstring",
	datastr : grdata,  //  JSON object generated by another function
	gridview : false,
	height : '100%',
	hoverrows : false,
	loadonce : true,
	sortable : false,
	jsonReader : {
		repeatitems : false
	}
});

// Demographics Grid

$("#demogr").jqGrid( {
	caption : "Demographics",
	colNames : [ 'Info', 'Data' ],
	colModel : [ {
		name : 'Info',
		width : "30%",
		sortable : false,
		jsonmap : 'ITEM'
	}, {
		name : 'Description',
		width : "70%",
		sortable : false,
		jsonmap : 'DESCRIPTION'
	} ],
	jsonReader : {
		root : "DEMOGRAPHICS",
		id : "DEMOID"
	}
});

// Other grids defined below...

If you:

• have shrinkToFit: false (mean fixed width columns)
• have autowidth: true
• don't care about fluid height
• have horizontal scrollbar

You can make grid with fluid width with following styles:

.ui-jqgrid {
  max-width: 100% !important;
  width: auto !important;
}

.ui-jqgrid-view,
.ui-jqgrid-hdiv,
.ui-jqgrid-bdiv {
   width: auto !important;
}

Here is a demo

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 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.

http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed

autowidth: true

worked perfectly for me. learnt from here.

This works..

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?
});

<script>
$(document).ready(function(){    
$(window).on('resize', function() {
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');      
});
</script>