¿Cambiar el tamaño de jqGrid cuando se cambia el tamaño del navegador?

¿Hay alguna forma de cambiar el tamaño de un jqGrid cuando se cambia el tamaño de la ventana del navegador? Probé el método descrito aquí, pero esa técnica no funciona en IE7.

He estado usando esto en producción durante algún tiempo sin ninguna queja (puede ser necesario realizar algunos ajustes para verse bien en su sitio ... por ejemplo, restar el ancho de una barra lateral, etc.)

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

Como seguimiento:

El código anterior que se muestra en esta publicación finalmente se abandonó porque no era confiable. Ahora estoy usando la siguiente función de API para cambiar el tamaño de la cuadrícula, como lo recomienda la documentación de jqGrid:

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

Para hacer el cambio de tamaño real, una función que implementa la siguiente lógica está vinculada al evento de cambio de tamaño de la ventana:

• Calcule el ancho de la cuadrícula usando el clientWidth de su padre y (si no está disponible) su atributo offsetWidth.

• Realice una verificación de cordura para asegurarse de que el ancho haya cambiado más de x píxeles (para solucionar algunos problemas específicos de la aplicación)

• Finalmente, use setGridWidth () para cambiar el ancho de la cuadrícula

Aquí hay un código de ejemplo para manejar el cambio de tamaño:

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

Y marcado de ejemplo:

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

Cambio de tamaño automático:

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

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

esto parece estar funcionando bien para mí

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

Estoy usando 960.gs para el diseño, por lo que mi solución es la siguiente:

    $(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"
    }
});

// Otras cuadrículas definidas a continuación ...

Si tu:

• tener shrinkToFit: false (columnas de ancho fijo medio)
• tener autowidth: true
• no me importa la altura del fluido
• tener barra de desplazamiento horizontal

Puede hacer una cuadrícula con ancho fluido con los siguientes estilos:

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

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

Aquí hay una demostración

Tomando prestado del código en su enlace, puede intentar algo como esto:

$(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%');
    });
});

De esta manera, se vincula directamente al evento window.onresize, que en realidad se parece a lo que desea de su pregunta.

Si su cuadrícula está configurada al 100% de ancho, debería expandirse automáticamente cuando su contenedor se expanda, a menos que haya algunas complejidades en el complemento que está utilizando que no conozco.

La respuesta principal funcionó para mí, pero hizo que la aplicación no respondiera en IE, así que usé un temporizador como se sugirió. El código se parece a esto ( $(#contentColumn)es el div en el que se encuentra JQGrid):

  function resizeGrids() {
    var reportObjectsGrid = $("#ReportObjectsGrid");
    reportObjectsGrid.setGridWidth($("#contentColumn").width());
};

var resizeTimer;

$(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
});

Hola, entusiastas del desbordamiento de Stack. Disfruté la mayoría de las respuestas, e incluso voté a favor de un par, pero ninguna de ellas funcionó para mí en IE 8 por alguna extraña razón ... Sin embargo, encontré estos enlaces ... Este tipo escribió una biblioteca que parece trabajo. Inclúyelo en tus proyectos además de jquery UI, agrega el nombre de tu tabla y el 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

funcionó perfectamente para mí. aprendido de aquí .

Esto funciona..

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>