Redimensionner jqGrid lorsque le navigateur est redimensionné ?

Question

Existe-t-il un moyen de redimensionner un jqGrid lorsque la fenêtre du navigateur est redimensionnée ? J'ai essayé la méthode décrite ici mais cette technique ne fonctionne pas dans IE7.

Answer 1

Je l'utilise en production depuis un certain temps sans me plaindre (il peut être nécessaire de le modifier pour qu'il s'adapte à votre site, par exemple en soustrayant la largeur d'une barre latérale, etc.)

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

Answer 2

En guise de suivi :

Le code précédent présenté dans ce post a finalement été abandonné car il n'était pas fiable. J'utilise maintenant la fonction API suivante pour redimensionner la grille, comme le recommande la documentation de jqGrid :

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

Pour effectuer le redimensionnement réel, une fonction mettant en œuvre la logique suivante est liée à l'événement de redimensionnement de la fenêtre :

• Calculez la largeur de la grille en utilisant la largeur du client de son parent et (si elle n'est pas disponible) son attribut offsetWidth.

• Effectuer un contrôle d'intégrité pour s'assurer que la largeur a changé de plus de x pixels (pour contourner certains problèmes spécifiques aux applications).

• Enfin, utilisez setGridWidth() pour modifier la largeur de la grille.

Voici un exemple de code pour gérer le redimensionnement :

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

Et un exemple de balisage :

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

Answer 3

Redimensionnement automatique :

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

Pour 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

Cela semble bien fonctionner pour moi.

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

Answer 5

J'utilise 960.gs pour la mise en page et ma solution est donc la suivante :

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

// Autres grilles définies ci-dessous...