Chiamare correttamente setGridWidth su un jqGrid all'interno di una finestra di dialogo jQueryUI

Question

Ho una finestra di dialogo jQueryUI (#locDialog) che contiene un jqGrid ($grid) al suo interno. Quando si apre la finestra di dialogo (inizialmente, ma viene chiamato ogni volta che si apre), desidero che lo $grid ridimensioni alle dimensioni dello $locDialog. Quando lo faccio inizialmente, ottengo barre di scorrimento all'interno della griglia (non all'interno della finestra di dialogo).

Se il debug del codice, vedo la larghezza della $grid è 677. Così, ho chiamare setGridWidth() nuovo e controllare la larghezza e ora ho 659, che è 18px meno, che è la dimensione dell'area di scorrimento per jqGrid (Dun-dun-dun ..)

Quando rezie la finestra di dialogo, ridimensiono anche la griglia, e tutto è felice: nessuna barra di scorrimento, tranne dove necessario.

Il mio codice di inizializzazione di dialogo:

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

Sono curioso di sapere se qualcuno ha visto questo prima. In realtà, non è la fine del mondo se inizialmente ho delle barre di scorrimento non necessarie, ma è solo strano che quando chiamo setGridWidth inizialmente, non tenga conto dell'area di scorrimento di 18px.

Per quanto riguarda il numero magico 54, è il numero che ho dovuto sottrarre dall'altezza del valore della finestra di dialogo per ottenere il rendering della griglia senza barre di scorrimento non necessarie.

---

Penso che potrebbe essere un problema di temporizzazione, anche se questo non ha molto senso. Forse dovrei chiamare un evento una volta che la griglia è stata caricata completamente. Questo può garantire che calcoli correttamente la sua larghezza.

Answer 1

Ci sono alcuni casi in cui jqGrid calcola la larghezza un po 'errata. Principalmente ho problemi con la larghezza della griglia, ma in alcuni casi su IE6 anche con l'altezza. Quindi devo scrivere una piccola funzione per risolvere il 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); 
}; 

In questo codice "main" è l'id del div genitore all'interno della quale verrà creata la griglia. Nel codice I test (scrollWidth > mainWidth) se la larghezza di "main" consente l'aumento della larghezza di jqGrid.

posto giusto per chiamare questa funzione è dentro di loadComplete:

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

e dentro di "done", se si utilizza 'columnChooser' se l'uso l'uso Query('#list').jqGrid('columnChooser');

(in questo esempio io uso anche 'gridResize'.)