Q:

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

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.

A:

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.

A:

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.

