Resize jqGrid when resizing browser?

Question

Can I resize jqGrid when resizing the browser window? I tried the method described here , but this method does not work in IE7.

Answer 1

As a continuation:

The previous code shown in this post was eventually abandoned because it was unreliable. Now I use the following API function to resize the grid, as recommended in the jqGrid documentation:

jQuery("#targetGrid").setGridWidth(width); 

To perform the actual resizing, a function that implements the following logic is bound to a window resize event:

• Calculate the width of the grid using its parent clientWidth and (if not available) its offsetWidth attribute.

• Perform a health check to ensure that the width has changed by more than x pixels (to bypass some application-specific issues)

• Finally, use setGridWidth () to change the grid width

Here is a sample code for handling sizes:

 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 the markup example:

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

Answer 2

Using this in production for some time now without any complaints (it may take some change to look right on your site .. for example, subtracting the width of the sidebar, etc.)

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

Answer 3

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

Answer 4

this seems to work well for me

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

Answer 5

I use 960.gs for linking, 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 ...

Answer 6

Borrowing from the code from your link, you can 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%'); }); }); 

That way, you attach directly to the window.onresize event, which actually looks like what you want from your question.

If your grid is set to 100% width, although it should automatically expand when its container expands, unless there are any difficulties for the plugin you are using, which I do not know about.

Answer 7

The main answer worked for me, but made the application extremely immune to IE, so I used the timer as suggested. The code looks something like this ( $(#contentColumn) is the div the JQGrid is in):

  function resizeGrids() { var reportObjectsGrid = $("#ReportObjectsGrid"); reportObjectsGrid.setGridWidth($("#contentColumn").width()); }; var resizeTimer; $(window).bind('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeGrids, 60); }); 

Answer 8

Hi enthusiasts. I liked most of the answers and even voted for a couple, but none of them worked for me in IE 8 for some strange reason ... I still came across these links ... This guy wrote a library that, seems to work. Include it in your projects in adittion to jquery UI, enter the name of your table and 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

Answer 9

If you:

• have shrinkToFit: false (fixed-width middle columns)
• have autowidth: true
• don't care about the height of the liquid
• have a horizontal scroll bar

You can make a fluid-width mesh with the 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

Answer 10

 autowidth: true 

worked great for me. found out from here .

Answer 11

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

Answer 12

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

Answer 13

Try the following:

 width: null shrinkToFit: true