Llamar correctamente a setGridWidth en un jqGrid dentro de un cuadro de diálogo jQueryUI

Question

Tengo un cuadro de diálogo jQueryUI (#locDialog) que tiene un jqGrid ($grid) dentro de él. Cuando se abre el cuadro de diálogo (inicialmente, pero se llama cada vez que se abre), quiero que el $grid cambie el tamaño al $locDialog. Cuando hago esto inicialmente, obtengo barras de desplazamiento dentro de la grilla (no dentro del diálogo).

Si puedo depurar el código, veo el ancho de la $grid es 677. Por lo tanto, llamar setGridWidth() de nuevo y comprobar el ancho y ahora tengo 659, que es menos 18px, que es el tamaño de la zona de desplazamiento para jqGrid (Dun-dun-dun ..)

Cuando actualizo el cuadro de diálogo, también cambio el tamaño de la cuadrícula, y todo está contento, sin barras de desplazamiento, excepto cuando sea necesario.

diálogo Mis código de inicio:

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

Tengo curiosidad si alguien ha visto esto antes. Realmente, no es el fin del mundo si inicialmente tengo barras de desplazamiento innecesarias al principio, pero es extraño que cuando llamo a setGridWidth inicialmente, no tenga en cuenta el área de desplazamiento de 18px.

En cuanto al número mágico 54, ese es el número que tuve que restar del alto del valor de diálogo para obtener la cuadrícula para representar sin barras de desplazamiento innecesarias.

---

Creo que puede ser un problema de tiempo, aunque esto no tiene mucho sentido. Tal vez debería llamar a un evento una vez que la grilla esté completamente cargada. Esto puede asegurar que calcula su ancho correctamente.

Answer 1

Hay algunos casos en que jqGrid calcula el ancho un poco incorrecto. Mayormente tengo problemas con el ancho de la grilla, pero en algunos casos en IE6 también con la altura. Entonces tengo que escribir una pequeña función para solucionar el problema.

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

En este código "main" es el ID del div matriz dentro de la cual se creará la red. En el código que pruebo (scrollWidth > mainWidth) si el ancho de "main" permite aumentar el ancho de jqGrid.

lugar correcto llamar a esta función se encuentra dentro de loadComplete:

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

y en el interior de "done", si utiliza 'columnChooser' si el uso el uso Query('#list').jqGrid('columnChooser');

(en este ejemplo utilizo también 'gridResize').