Dojo datagrid not shown on deselected tabbar

http://stackoverflow.com/questions/11137599/dojo-datagrid-not-shown-on-deselected-tabbar

by syafid

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css">
<div id="tabs" data-dojo-type="dijit.layout.TabContainer">
  <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'tab a'">
      Change to tab be to see grid 
  </div>  
  <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'tab b'">
      <div id="gridDiv"></div>
  </div>
</div>

CSS

html, body, #tabs {
    height: 100%;   
}

#grid {
    width: 43em;
    height: 20em;
}

JavaScript

require(["dijit/layout/TabContainer", "dijit/layout/ContentPane"], 
function(){ });

require(["dojox/grid/DataGrid", "dojo/data/ItemFileWriteStore", "dojo/!domReady"], 
    function(Grid,  Store){

        var fnCreateGrid = function() {
            /*set up data store*/
            var data = {
              identifier: 'id',
              items: []
            };
            var data_list = [
              { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
              { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
              { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
            ];
            var rows = 60;
            for(var i=0, l=data_list.length; i<rows; i++){
              data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
            }
            var store = new Store({data: data});
        
            /*set up layout*/
            var layout = [[
              {'name': 'Column 1', 'field': 'id', 'width': '100px'},
              {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
              {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
                      {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
            ]];
        
            /*create a new grid:*/
            var grid = new Grid({
                id: 'grid',
                store: store,
                structure: layout,
                rowSelector: '20px'},
              document.createElement('div'));
        
            /*append the new grid to the div*/
            dojo.byId("gridDiv").appendChild(grid.domNode);
        
            /*Call startup() to render the grid*/
            grid.startup();                              
        };            
});