Onglets jqGrid et JQuery UI affichant des grilles développées uniquement sur l'onglet principal (div)

Question

J'ai ajouté des grilles (jqgrid) à un objet jQuery UI Tabs. Toutes les grilles de l'enfant Tabs agrandies par défaut s'affichent parfaitement. Mais les grilles sur les enfants Tab qui ne sont PAS étendues par défaut, montre en permanence le jqGrid small (jqgrid avec autowidth = true). Des idées?

Merci!

Voir http://www.revolucion7.com/wp-content/uploads/2009/10/jqgridp1.JPG

En d'autres termes ...

J'ai deux onglets sur une page avec jqgrids sur chacun. Les deux jqgrids ont la propriété autowidth définie, le problème est quand la page charge la première grille est ajustée à la taille du conteneur mais quand j'ai cliqué sur le deuxième onglet la deuxième grille ne s'ajuste pas à la taille du conteneur.

Answer 1

Comment initialisez-vous les jqGrids sur les autres onglets? Vous devez les initialiser lorsque l'onglet est affiché en utilisant l'événement show, par exemple:

jQuery(document).ready(function() { 
var initialized = [false, false]; 
jQuery('#tabs').tabs({show: function(event, ui) { 
        if (ui.index == 0 && !initialized[0]){ 
         // Initialize grid on second tab page here... 
         jQuery(NOMBRE_GRID).jqGrid({ 
          url: '/Idiomas/DatosGrid/', 
          datatype: 'json', 
          mtype: 'GET', 
          height: 'auto', 
          multiselect: true, 
          autowidth: true,   
          colNames: ['Id', 'Nombre'], 
          colModel: [ 
            { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left', 
             formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' } 
            }, 
            { name: 'nombre', index: 'nombre', width: 100, align: 'left' } 
           ], 
          pager: jQuery(NOMBRE_AREA_PAGINACION), 
          rowNum: tamanoPagina, 
          rowList: [5, 10, 15, 20], 
          sortname: 'nombre', 
          sortorder: “asc”, 
          viewrecords: true,   
          caption: 'Idiomas' 
         }).navGrid(NOMBRE_AREA_PAGINACION, { edit: false, add: false, del: false, refresh: false, search: false }); 
        }); 


        } else if (ui.index == 1 && !initialized[1]){ 
         // Initialize grid on second tab page here... 
         jQuery(NOMBRE_GRID_SELECCIONADOS).jqGrid({ 
          url: '/Idiomas/DatosGrid/', 
          datatype: 'json', 
          mtype: 'GET', 
          height: 'auto', 
          multiselect: true, 
          autowidth: true,   
          colNames: ['Id', 'Nombre'], 
          colModel: [ 
            { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left', 
             formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' } 
            }, 
            { name: 'nombre', index: 'nombre', width: 100, align: 'left' } 
           ], 
          sortname: 'nombre', 
          sortorder: “asc”, 
          viewrecords: true,   
          caption: 'Idiomas' 
         }); 

        initialized[ ui.index ] = true; 
}); 

Si vous faites cette approche, vous aurez également besoin de garder une trace quand chaque grille est initialisé, de sorte que vous ne cherchez pas à créez-le une seconde fois si l'utilisateur clique sur un autre onglet puis clique sur le précédent.

Answer 2

En fait, vous pouvez le rendre plus simple en ajoutant un redimensionnement à l'onglet Afficher l'événement:

$('#tabs').tabs({ show: function(event, ui) { 
    if (grid = $('.ui-jqgrid-btable:visible')) { 
    grid.each(function(index) { 
     gridId = $(this).attr('id'); 
     gridParentWidth = $('#gbox_' + gridId).parent().width(); 
     $('#' + gridId).setGridWidth(gridParentWidth); 
    }); 
    } 
}}); 

Answer 3

Parfois, vous ne voulez pas initialiser votre jqGrid sur l'événement montrent que toutes vos données est similaire et peut être tiré dans une demande. Dans ce cas, vous pouvez définir les largeurs de tous jqgrids à la largeur du visible un

var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width(); 

Réglez ensuite le paramètre de largeur de chaque jqGrid à cette valeur lors de l'initialisation.

Answer 4

Je pense que cela un double possible avec this question

j'aurais parié que trois ans après cette question a été posée cette question serait corrigé mais je vois que c'est pas :). J'ai pensé à mettre à jour la réponse de Justin ci-dessus, mais j'ai finalement décidé de la laisser pour les purpouses de compatibilité des versions précédentes, si je ne respecte pas les règles des forums, veuillez me le faire savoir et je mettrai à jour la réponse ci-dessus. dans jQueryUI show event is now deprecated et devrait être renommé activate, et aussi avec le new APIui.index est maintenant remplacé par ui.newTab.index() pour activate et ui.tab.index() pour create.

J'ai également trouvé que je devais lier une fonction à l'événement create afin de mettre la grille dans le premier onglet.

résumer tout cela, voici la version mise à jour de Justin's code ci-dessus, l'espoir qu'il aide, il a travaillé pour moi:

var initialized = [false,false,false]; 
$("#tabs").tabs({ 
    create:function(event,ui){ 
    var mytabindex = ui.tab.index() 
    if (mytabindex == 0 && !initialized[0]){ 
     $("#grid0").jqGrid({ 
      ... 
      autowidth:true, 
      ... 
     }); 
    } 
    initialized[ mytabindex ] = true; 
    }, 
    activate: function(event, ui) { 
    var mytabindex = ui.newTab.index() 
    if (mytabindex == 1 && !initialized[1]){ 
     $("#grid1").jqGrid({ 
     ...  
     autowidth:true, 
     ... 
     }); 
    } 
    else if (mytabindex == 2 && !initialized[2]){ 
     $("#grid2").jqGrid({ 
     ...  
     autowidth:true, 
     ... 
     }); 
    } 
    initialized[ mytabindex ] = true; 
    } 
}); 

Answer 5

#grid,.ui-jqgrid,.ui-jqgrid-hdiv,.ui-jqgrid-view,.ui-jqgrid-titlebar,.ui-jqgrid-bdiv,.ui-jqgrid-pager 
{ 
width: 100% !important; 
}