var created = false;
    var create = function() {
        if (created === true)
            return;

        created = true;
        $('#mygrid').jqGrid(cfg);
    };

    if (!$('#mygrid').is(':hidden')) {
      // good to go.
      create();
    }
    else {
      var tabHandler = function(event, ui) {
        if (!$('#mygrid').is(':hidden')) {
          // good to go.
          create();
          $('#tabs').unbind("tabsshow", tabHandler);
        }
      };
      $('#tabs').bind("tabsshow", tabHandler);
    }

(the above assumes '#tabs' is the tab block and the '#mygrid' is where the grid will be rendered)

$(document).ready(function(){

$('#tabs').tabs({

"select":function(event,ui){

switch(ui.index){

case 0:

loadGrid();

break;

........

}

}

});

});

.

var grid_isloaded=false;

function loadGrid(){

if(!grid_isloaded){

$('#...').jqGrid({.....});

grid_isloaded=true;

}else

$('#...).trigger("reloadGrid");

};

This is what I do  and has the advantage that it is not getting the data until the tab is clicked, improving page load time.

Dave

I'm trying to embed multiple jqGrids in jquery-ui tab structure, the problem being that the width:'auto' setting seems to fail for those that are in the hidden tabs - so when I move to a tab that's initially not selected with a rendered jqGrid within it the grid is tiny.

I believe this is because jquery apparently cannot get the width of a containing element when it's hidden (I know it has trouble getting the position/etc.). 

Has anybody had experience rendering a jqGrid that is within an initially hidden element? Outside of deferring the jqGrid initialization until after the tab is clicked, is there a way to get this to work correctly?  

Alternatively I could try and auto-width it myself by crawling up the parent() tree until I find a is(":visible") element and calculating what the container size WILL be, but that seems like a bit of a hack.