title: Applying Item Renderer to Flex Advanceddatagrid
body: <p>I'm trying to apply a custom item renderer to a Flex AdvancedDataGrid. I'm testing right now by applying a solid black square to the parent nodes @ depth="1". The black square is not the final item renderer, I just want to make sure I can apply a custom item renderer to the parent nodes. The end product will have a few get styles and a background skin drawn using the drawing APi.</p>
  
  <p>References...
  See <a href="https://stackoverflow.com/questions/5566786/set-alternate-color-for-advanceddatagrid-one-for-parent-node-and-other-for-chi">this</a>!</p>
  
  <p>See <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_10.html" rel="nofollow noreferrer">"Using item renderers with the AdvancedDataGrid control"</a>!</p>
  
  <p>See <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/AdvancedDataGrid.html" rel="nofollow noreferrer">Adobe language Ref</a>!</p>
  
  <p>Example #1 - This should apply the _groupItemRendereFactory to the columns, and apply the GroupTitleRenderer to the any column at <strong>depht="1"</strong>
  <code>
  </p>
  
  <pre><code>        &lt;mx:dataProvider&gt;
              &lt;mx:HierarchicalCollectionView id="foldersView"&gt;
                  &lt;mx:source&gt;
                      &lt;mx:HierarchicalData id="foldersData" source="{ model.folders }" childrenField="profiles" /&gt;
                  &lt;/mx:source&gt;
              &lt;/mx:HierarchicalCollectionView&gt;
          &lt;/mx:dataProvider&gt;
          &lt;mx:columns&gt;
              &lt;mx:AdvancedDataGridColumn id="column" dataField="name" headerText="Name" itemRenderer="{ _groupItemRendererFactory }" /&gt;
          &lt;/mx:columns&gt;
          &lt;mx:rendererProviders&gt;
              &lt;mx:AdvancedDataGridRendererProvider columnIndex="1" columnSpan="1" depth="1" renderer="com.theme.skins.GroupTitleItemRenderer"/&gt;
          &lt;/mx:rendererProviders&gt;
      &lt;/mx:AdvancedDataGrid&gt;&lt;/code&gt;
  </code></pre>
  
  <p>Example #2 - Here I'm trying to specify which item renderer to use at which depth.</p>
  
  <p>
  </p>
  
  <pre>        &lt;mx:dataProvider&gt;
              &lt;mx:HierarchicalCollectionView id="foldersView"&gt;
                  &lt;mx:source&gt;
                      &lt;mx:HierarchicalData id="foldersData" source="{ model.folders }" childrenField="profiles" /&gt;
                  &lt;/mx:source&gt;
              &lt;/mx:HierarchicalCollectionView&gt;
          &lt;/mx:dataProvider&gt;
          &lt;mx:columns&gt;
              &lt;mx:AdvancedDataGridColumn id="column" dataField="name" headerText="Name"/&gt;
          &lt;/mx:columns&gt;
          &lt;mx:rendererProviders&gt;
              &lt;mx:AdvancedDataGridRendererProvider columnIndex="1" columnSpan="1" depth="1" renderer="com.themes.skins.GroupTitleItemRenderer"/&gt;
              &lt;mx:AdvancedDataGridRendererProvider columnIndex="1" columnSpan="1" depth="2" renderer="{ _groupItemRendererFactory }"/&gt;
          &lt;/mx:rendererProviders&gt;
      &lt;/mx:AdvancedDataGrid&gt;&lt;/code&gt;
  </code></pre>