title: Flex Datagrid + Tab Navigator
body: <p>I have a several datagrids (with data being retrieved from some map service). </p>
  
  <p>I want to place these data grids within seperate tabs of a tab navigator. All works fine apart from the first tab which always ends up without any datagrid in it. </p>
  
  <p>I have tried creation policy="all" and stuff but the first tab always is empty. Does anybody have any ideas as to why the first tab is always empty.</p>
  
  <p>Any workarounds.</p>
  
  <p>Thanks</p>
  
  <pre><code>var box:HBox=new HBox();
  var dg:DataGrid = new DataGrid();
  dg.dataProvider = newAC;
  box.label=title.text;
  box.addChild(dg);
  tabNaviId.addChild(box);
  tabNaviId.selectedIndex=2;  
  resultsArea.addChild(tabNaviId);
  </code></pre>
  
  <p>dg is datagrid that is being filled up. The above code is in a loop, in each loop i am creating an Hbox+datagrid. then i am adding the Hbox to the navigator and final adding the navigator to resultsArea (which is a canvas).</p>
  
  <p>The above code works great apart from first time. </p>
  
  <p>The end result i get is, having a tab navigator with first tab without any datagrid but the remaining tabs all have the datagrids. Any ideas as to why this is happening.</p>
  
  <p>Call to a function called createDatagrid is made:</p>
  
  <pre><code>dgCollection.addItem(parentApplication.resultsPanel.createDatagrid( token.name.toString() + " (" + recAC.length + " selected)", recAC, false, callsToMake ));
  </code></pre>
  
  <p>In another Mxml component this function exists</p>
  
  <pre><code>public function createDatagrid(titleText:String, recACAll:ArrayCollection, showContent:Boolean, callsToMake:Number):DataGrid
          {
  
              var dg:DataGrid = new DataGrid();
              var newAC:ArrayCollection = new ArrayCollection();
              var newDGCols:Array = new Array();
  
              for( var i:Number = 0; i &lt; recACAll.length; i ++)
              {
                  var contentStr:String = recACAll[i][CONTENT_FIELD];
                  var featureGeo:Geometry = recACAll[i][GEOMETRY_FIELD];
                  var iconPath:String = recACAll[i][ICON_FIELD];
                  var linkStr:String = recACAll[i][LINK_FIELD];
                  var linkNameStr:String = recACAll[i][LINK_NAME_FIELD];
                  var featurePoint:MapPoint = recACAll[i][POINT_FIELD];
                  var titleStr:String = recACAll[i][TITLE_FIELD];
  
                  if( contentStr.length &gt; 0)
                  {
                      var rows:Array = contentStr.split("\n");
  
                      var tmpObj:Object = new Object();
  
                      if(!showContent)
                      {
                          for( var j:Number = 0; j &lt; rows.length; j++)
                          {
                              var tmpStr:String = rows[j] as String;
                              var header:String = tmpStr.substring(0,tmpStr.indexOf(":"));
                              var val:String = tmpStr.substring(tmpStr.indexOf(":") + 2);
                              if(header.length &gt; 0)
                              {
                                  tmpObj[header] = val;
                                  if(newDGCols.length &lt; rows.length - 1)
                                  {
                                      newDGCols.push( new DataGridColumn(header));
                                  }
                              }
                          }
                      }
                      else
                      {
                          if(newDGCols.length == 0)
                          {
                              newDGCols.push(new DataGridColumn(CONTENT_FIELD));
                              newDGCols.push(new DataGridColumn(GEOMETRY_FIELD));
                              newDGCols.push(new DataGridColumn(ICON_FIELD));
                              newDGCols.push(new DataGridColumn(LINK_FIELD));
                              newDGCols.push(new DataGridColumn(LINK_NAME_FIELD));
                              newDGCols.push(new DataGridColumn(POINT_FIELD));
                              newDGCols.push(new DataGridColumn(TITLE_FIELD));
                          }
                      }
  
                      tmpObj[CONTENT_FIELD] = contentStr;
                      tmpObj[GEOMETRY_FIELD] = featureGeo;
                      tmpObj[ICON_FIELD] = iconPath;
                      tmpObj[LINK_FIELD] = linkStr;
                      tmpObj[LINK_NAME_FIELD] = linkNameStr;
                      tmpObj[POINT_FIELD] = featurePoint;
                      tmpObj[TITLE_FIELD] = titleStr;
  
                      newAC.addItem(tmpObj);
                  }
  
                  if( showHidePic.source == minSourceI )
                  {
                      showHidePic.source = minSource;
                  }
                  else if( showHidePic.source == maxSourceI )
                  {
                      showHidePic.source = maxSource;
                  }
                  curResults = curResults + recACAll.length;
  
                  if (curResults == 1)
                  {
                      showInfoWindow(tmpObj);
  
                      if(showContent)
                      {
                          parentApplication.maps.map.extent = featureGeo.extent;
                      }
                  }
                  else
                  {
                      showInfoWindow(null);
                      // Added to avoid the overview button problem (needs checking)
                      this.removeEventListener(MouseEvent.MOUSE_OVER, handleMouseOver, false);
                      this.removeEventListener(MouseEvent.MOUSE_MOVE,handleMouseOver,false);
                      this.removeEventListener(MouseEvent.MOUSE_OUT,handleMouseOut,false);
                      this.removeEventListener(MouseEvent.MOUSE_DOWN,handleMouseDrag,false);
                      this.removeEventListener(MouseEvent.MOUSE_UP,handleMouseDragStop,false);
                      this.parent.removeEventListener(MouseEvent.MOUSE_MOVE,handleParentMove,false);
                      this.parent.removeEventListener(MouseEvent.MOUSE_UP,handleMouseDragStop2,false);
                      maximizePanel();
                  }
  
              }
  
              dg.dataProvider = newAC;
              dg.columns = newDGCols;
              dg.rowCount = newAC.length;
  
              var totalDGCWidth:Number = 0;
  
              for( var m:Number = 0; m &lt; dg.columns.length; m++)
              {
                  var dgc2:DataGridColumn = dg.columns[m];
  
                  /*if(dgc2.headerText.toUpperCase()==LINK_FIELD.toUpperCase()){
  
                  //dgc.itemRenderer=new ClassFactory(CustomRenderer);
                  dgc2.itemRenderer=new ClassFactory(CustomRenderer);
                  }*/
                  var dgcWidth2:Number = dgc2.headerText.length * CHAR_LENGTH;
  
                  for( var l:Number = 0; l &lt; newAC.length; l++)
                  {
                      var row2:Object = newAC.getItemAt(l) as Object;
                      var rowVal2:String = row2[dgc2.headerText];
  
                      if( rowVal2 != null)
                      {
                          var tmpLength2:Number = rowVal2.length * CHAR_LENGTH;
  
                          if(tmpLength2 &lt; CHAR_MAX_LENGTH)
                          {
                              if(tmpLength2 &gt; dgcWidth2)
                              {
                                  dgcWidth2 = tmpLength2;
                              }
                          }
                          else
                          {
                              dgcWidth2 = CHAR_MAX_LENGTH
                              break;
                          }
                      }
  
                  }
                  // Added by FT:to change the item renderer for link field
  
  
                  if( dgc2.headerText == GEOMETRY_FIELD || dgc2.headerText == CONTENT_FIELD ||
                      dgc2.headerText == ICON_FIELD || dgc2.headerText == LINK_FIELD ||
                      dgc2.headerText == POINT_FIELD || dgc2.headerText == TITLE_FIELD ||
                      dgc2.headerText == LINK_NAME_FIELD)
                  {
                      if(dgc2.headerText == CONTENT_FIELD &amp;&amp; showContent)
                      {
                          //something
                      }
                      else
                      {
  
                          dgcWidth2 = 0;
                      }
                  }
  
                  totalDGCWidth += dgcWidth2;
              }
  
              dg.width = totalDGCWidth;
  
  
  
              for( var k:Number = 0; k &lt; dg.columns.length; k++)
              {
                  var dgc:DataGridColumn = dg.columns[k];
                  var dgcWidth:Number = dgc.headerText.length * CHAR_LENGTH;
                  for( var n:Number = 0; n &lt; newAC.length; n++)
                  {
                      var row:Object = newAC.getItemAt(n) as Object;
                      var rowVal:String = row[dgc.headerText];
  
                      if(rowVal != null)
                      {
                          var tmpLength:Number = rowVal.length * CHAR_LENGTH;
  
                          if(tmpLength &lt; CHAR_MAX_LENGTH)
                          {
                              if(tmpLength &gt; dgcWidth)
                              {
                                  dgcWidth = tmpLength;
                              }
                          }
                          else
                          {
                              dgcWidth = CHAR_MAX_LENGTH
                              break;
                          }
                      }
  
                  }
                  if( dgc.headerText == GEOMETRY_FIELD || dgc.headerText == CONTENT_FIELD ||
                      dgc.headerText == ICON_FIELD || dgc.headerText == LINK_FIELD ||
                      dgc.headerText == POINT_FIELD || dgc.headerText == TITLE_FIELD ||
                      dgc.headerText == LINK_NAME_FIELD)
                  {
                      if(dgc.headerText == CONTENT_FIELD &amp;&amp; showContent)
                      {
                          dgc.visible = true;
                      }
                      else
                      {
  
                          dgc.visible = false;
                          dgcWidth = 0;
                      }
                  }
  
                  if( dgc.headerText == LINK_COL_NAME)
                  {
                      dgcWidth = LINK_COL_WIDTH;
                  }
  
                  dgc.width = dgcWidth;
              }
  
              dg.addEventListener(ListEvent.ITEM_CLICK,rowClicked);
              dg.addEventListener(ListEvent.ITEM_ROLL_OVER,mouseOverRow);
              dg.addEventListener(ListEvent.ITEM_ROLL_OUT,mouseOutRow);
  
              var title:Text = new Text();
              title.text = titleText;
              title.setStyle("fontWeight","bold");
  
              //resultsArea.addChild(title);
  
              return dg;
  
  
              //tabNaviId.selectedIndex=2;    
  
  
          }
          public function populateGrid(dgCollection:ArrayCollection):void{
  
  
              for( var k:Number = 0; k &lt; dgCollection.length; k++)
              {
                  var box:HBox=new HBox();
                  var dg2:DataGrid=dgCollection.getItemAt(k) as DataGrid;
                  box.label="some";
                  box.addChild(dg2);
                  tabNaviId.addChild(box);
  
              }
              resultsArea.addChild(tabNaviId);
          }
  </code></pre>
  
  <p>and the tab navigator declared as</p>
  
  <pre><code>&lt;mx:Image id="showHidePic" click="toggleResults()"/&gt;
  &lt;mx:VBox y="20" styleName="ResultsArea" width="100%" height="100%"&gt;
      &lt;mx:HBox&gt;
          &lt;mx:Button label="Export to Excel" click="downloadExcel()"/&gt;
          &lt;mx:Button label="Clear" click="clear()" /&gt;
      &lt;/mx:HBox&gt;
      &lt;mx:VBox id="resultsArea" styleName="ResultsContent" paddingTop="10" paddingLeft="10" paddingRight="10" verticalScrollPolicy="off" horizontalScrollPolicy="off"&gt;
          &lt;mx:TabNavigator id="tabNaviId" width="622" height="274" creationPolicy="all"&gt;
  
          &lt;/mx:TabNavigator&gt;
  
      &lt;/mx:VBox&gt;
  &lt;/mx:VBox&gt;
  </code></pre>