JQGrid Colonne auto largeur

Question

Je me demande simplement comment pouvons-nous définir une largeur de colonne jqGrid à auto?

... 
colModel: [ 
{ name: 'MyDescription', index: 'description', align: 'left', width: 150, sortable: false }, 
... 

pour la déclaration ci-dessus comment puis-je spécifier une largeur automatique pour la colonne afin qu'il correspond à la taille de la teneur maximale en elle.

Answer 1

Il n'existe aucun moyen de spécifier la colonne autowidth dans jqGrid. Mais vous pouvez utiliser l'option shrinkToFit d'un ensemble de mailles à true et définir des valeurs de largeur approximatives (par exemple 20, 20, 20, 80) et la largeur des colonnes sera mise à l'échelle de la largeur d'une grille.

shrinkToFit:

Cette option décrit le type de calcul de la largeur initiale de chaque colonne à l'encontre de la largeur de la grille. Si la valeur est true et que l'option value in width est définie, alors: Chaque largeur de colonne est mise à l'échelle en fonction de la largeur de l'option définie. Exemple: si nous définissons deux colonnes avec une largeur de 80 et 120 pixels, mais que la grille doit avoir 300 pixels, les colonnes sont recalculées comme suit: 1- colonne = 300 (nouvelle largeur)/200 (somme de toute la largeur) * 80 (largeur de colonne) = 120 et 2 colonne = 300/200 * 120 = 180. La largeur de la grille est 300px. Si la valeur est false et que l'option value in width est définie, alors: La largeur de la grille est la largeur définie en option. La largeur de colonne n'est pas recalculée et les valeurs définies dans colModel.

Answer 2

Vous pouvez essayer d'utiliser tableToGrid, pour autant que je me souvienne qu'il conserve les largeurs. Si c'est le cas, vous pouvez également regarder dans son code source si son comportement ne correspond pas entièrement à vos besoins.

Answer 3

Vous pouvez utiliser la méthode setGridWidth.

Exemple:

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

DEMO

Answer 4

Cela fonctionne surtout pour moi.

<div id="myjqgridwrapper" style="width:100%;"> 
    <table id="myjqgrid"></table> 
    <div id="myjqgridfooter"></div> 
</div> 

<script type="text/javascript"> 
    //script to autosize grid 
    //don't forget autowidth:true for initial size 
    $(window).bind('resize', function(){ 
     //set to 0 so grid does not continually grow 
     $('#myjqgrid').setGridWidth(0); 
     //resize to our container's width 
     $('#myjqgrid').setGridWidth($('#myjqgridwrapper').width()); 
    }).trigger('resize'); 
</script> 

Answer 5

Try this. Worked For Me 

.ui-common-table{ 
    width: 100% !important; 
} 

.ui-jqgrid .ui-jqgrid-hbox{ 
    padding-right: 0px !important; 
}