JqGrid and jQuery UI tabs showing grids are expanded only on the main tab (div)

Question

I added some grids (jqgrid) to the jQuery UI Tabs object. All grids of the Tabs child that are expanded by default are displayed fine. But grids on child tabs that are NOT expanded by default show forever a small jqGrid (jqgrid with autowidth = true). Any ideas?

Thank!

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

In other words...

I have two tabs per page with jqgrids on each of them.

Both jqgrids have the autowidth set property, the problem is that when loading the page, the first grid adjusts to the size of the container, but when I click the second tab, the second grid does not adjust the size of the container.

Answer 1

How do you initialize jqGrids on other tabs? You must initialize them when the tab is displayed using an event show, for example:

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

If you follow this approach, you will also need to track when each grid is initialized, so you are not trying to create it a second time if the user clicks on another tab and then returns to the previous one.

Answer 2

Sometimes you don’t want to initialize jqgrid in the show event, since all your data is similar and can be pulled by one request. In this case, you can set the width of all jqgrids to the width of the visible

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

width jqgrid .

Answer 3

, , Show Tab:

$( '#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 4

,

, , , , :). , Justin , , , purpouses , , , ,

- jQueryUI activate, API ui.index ui.newTab.index() activate ui.tab.index() create.

, create, .

, Justin , , , :

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