jqGrid and JQuery UI tabs showing grids expanded only on primary tab (div)

Question

I have added some grids (jqgrid) to a jQuery UI Tabs object. All the grids on the Tabs child that is expanded by default, displays perfectly. But the grids on the Tab children that are NOT expanded by default, permanently shows the jqGrid small (jqgrid with autowidth=true). Any ideas?

Thanks!

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

On other words ...

I have two tabs on a page with jqgrids on each one.

Both jqgrids have autowidth property set, the problem is when page loads the first grid is adjusted to the size of the container but when i clicked the second tab the second grid is not adjusting to the size of the container.

Answer 1

How are you initializing the jqGrids on the other tabs? You should initialize them when the tab is shown using the show event, 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 are doing this approach you will also need to keep track of when each grid is initialized, so you do not try to create it a second time if the user clicks on another tab then clicks back to the previous one.

Answer 2

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

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

Then set the width parameter of each jqgrid to this value when initializing.

Answer 3

Actually, you can make it simpler by adding a resize to the Tab Show Event:

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

I think this a possible duplicate with this question

I would've bet that three years after this question was asked this issue would be corrected but I see it's not :). I thought of updating Justin's answer above, but I finally decided to leave it for purpouses of compatibility of previous versions, if I'm violating any forums rules please let me know and I'll update the answer above

Due to changes in jQueryUI show event is now deprecated and should be renamed to activate, and also with the new API ui.indexis now replaced with ui.newTab.index() for activate and to ui.tab.index() for create.

I also found that I had to bind a function to the create event in order to put the grid in the first tab.

Summing it up, here's the updated version of Justin's code above, hope it helps, it worked for me:

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