Appelez correctement setGridWidth sur un jqGrid à l'intérieur d'une boîte de dialogue jQueryUI

Question

J'ai une boîte de dialogue jQueryUI (#locDialog) qui contient un jqGrid ($grid) à l'intérieur. Lorsque le dialogue s'ouvre (initialement, mais il est appelé à chaque fois qu'il s'ouvre), je veux que le $grid soit redimensionné à la taille du $locDialog. Quand je fais cela au début, j'obtiens des barres de défilement dans la grille (pas dans la boîte de dialogue).

Si je déboguer le code, je vois la largeur de la $grid est 677. Donc, j'appelle setGridWidth() à nouveau et vérifier la largeur et maintenant j'ai 659, ce qui est 18px moins, ce qui est la taille de la zone de défilement pour le jqGrid (Dun-dun-dun ..)

Quand je trouve la boîte de dialogue, je redimensionne aussi la grille, et tout est content - pas de barre de défilement, sauf si nécessaire.

Mon dialogue Code init:

$locDialog = $('#location-dialog').dialog({ 
    autoOpen: false, 
    modal: true, 
    position: ['center', 100], 
    width: 700, 
    height:500, 
    resizable: true, 
    buttons: { 
       "Show Selected": function() {alert($('#grid').jqGrid('getGridParam','selarrrow'));}, 
       "OK": function() {$(this).dialog('close');}, 
       "Cancel": function() {$(this).dialog('close');} 
      }, 
    open: function(event, ui) { 
     $grid.setGridHeight($(this).height()-54); 
      // No idea why 54 is the magic number here 
     $grid.setGridWidth($(this).width(), true); 
    }, 
    close: function(event, ui) { 

    }, 
    resizeStop: function(event, ui) { 
     $grid.setGridWidth($locDialog.width(), true); 
     $grid.setGridHeight($locDialog.height()-54); 
    } 
}); 

Je suis curieux de savoir si quelqu'un a vu cela auparavant. Vraiment, ce n'est pas la fin du monde si j'ai d'abord des barres de défilement inutiles au début, mais c'est bizarre que lorsque j'appelle initialement setGridWidth, il ne tient pas compte de la zone de défilement de 18px.

En ce qui concerne le nombre magique 54, c'est le nombre que j'ai dû soustraire de la hauteur de la valeur du dialogue pour que la grille soit rendue sans barres de défilement inutiles. Je pense que cela peut être un problème de synchronisation, même si cela n'a pas beaucoup de sens. Peut-être que je devrais appeler un événement une fois que la grille est complètement chargée. Cela peut assurer qu'il calcule correctement sa largeur.

Answer 1

Dans certains cas, jqGrid calcule la largeur un peu incorrecte. La plupart du temps j'ai des problèmes avec la largeur de la grille, mais dans certains cas sur IE6 aussi avec la hauteur. Je dois donc écrire une petite fonction pour résoudre le problème.

var fixGridWidth = function (grid) { 
    var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth; 
    var mainWidth = jQuery('#main').width(); 
    var gridScrollWidth = grid[0].scrollWidth; 
    var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode); 
    var scrollWidth = gridScrollWidth; 
    if (htable.length > 0) { 
     var hdivScrollWidth = htable[0].scrollWidth; 
     if ((gridScrollWidth < hdivScrollWidth)) 
      scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth) 
    } 
    if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) { 
     var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; // min (scrollWidth, mainWidth) 
     // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth 
     if (newGridWidth != gviewScrollWidth) 
      grid.jqGrid("setGridWidth", newGridWidth); 
    } 
}; 

var fixGridHeight = function (grid) { 
    var gviewNode = grid[0].parentNode.parentNode.parentNode; 
    //var gview = grid.parent().parent().parent(); 
    //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv"); 
    var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode); 
    if (bdiv.length) { 
     var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight; 
     var height = grid.height(); 
     if (delta !== 0 && height && (height-delta>0)) { 
      grid.setGridHeight(height-delta); 
     } 
    } 
}; 

var fixGridSize = function (grid) { 
    this.fixGridWidth(grid); 
    this.fixGridHeight(grid); 
}; 

Dans ce code "main" est l'id div parent à l'intérieur duquel la grille sera créé. Dans le code, je teste (scrollWidth > mainWidth) si la largeur de "main" permet d'augmenter la largeur de jqGrid.

endroit correct pour appeler cette fonction est à l'intérieur loadComplete:

loadComplete: function() { 
    var gr = jQuery('#list'); 
    fixGridSize(gr); 
} 

et à l'intérieur de "done", si vous utilisez 'columnChooser' si l'utilisation utilisation Query('#list').jqGrid('columnChooser');

(dans cet exemple que j'utilise également 'gridResize'.)