Resize jqGrid when browser is resized?

Question

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.

Answer 1

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.

Answer 2

I have tried this function but it is not working for me in FF and IE .Could you please clarify me each and every line with explanation.Instead of 'div.subject' ,'table' what parameters i need to use .Where we need to call this function ?.

Answer 3

As a follow-up:

The previous code show 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 binded 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

Answer 4

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 5

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

Answer 6

It work, but the last column increment in your width, only in IE.

Answer 7

Same here, none of the examples are working for me in IE7.

Answer 8

I'm new to jquery..can u please help me and show me where shall i use the code. and how.

Thanks

Answer 9

this seems to be working nicely for me

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