title: Flex Nested data grid
body: <p>I am creating nested data grid using flex, I have different columns for each level(refer screenshot). But its rendering new data grid for each column. </p>
  
  <p>Here is my mxml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             minWidth="955" minHeight="600"&gt;
  &lt;fx:Declarations&gt;
      &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
  &lt;/fx:Declarations&gt;
  &lt;fx:Script&gt;
      &lt;![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          private var dpHierarchy:ArrayCollection = new ArrayCollection([
              {Country:"INDIA", Category:"Developing Country" ,Population:100000000, 
                  children: [
                      {State:"Andhra", Language:"Telugu", SoilColor:"Red", 
                          children:[ 
                              {District:"GUNTUR", HeadQuaters:388865, Crops:"Tobacco"}, 
                              {District:"Vijayawada", HeadQuaters:388865, Crops:"rice"}
                              ] },
                      {State:"Karnataka", Language:"Kannada", SoilColor:"Black", 
                          children:[ 
                              {District:"Mysore", HeadQuaters:388865, Crops:"Mirchi"}, 
                              {District:"Mandya", HeadQuaters:388865, Crops:"Vegetables"}
                          ] }
                      ] },
              {Country:"KOREA", Category:"UnDeveloping Country", Population:100000000, 
                  children:[
                      {State:"fgff", Language:"fggff", SoilColor:"Red", 
                          children: [ 
                              {District:"fgdfgfg", HeadQuaters:388865, Crops:"Tobacco"}, 
                              {District:"gfgdfgfg", HeadQuaters:388865, Crops:"rice"}
                          ] },
                      {State:"fgfgdfg", Language:"gdfgdfg", SoilColor:"Black", 
                          children:[ 
                              {District:"ggff", HeadQuaters:388865, Crops:"Mirchi"}, 
                              {District:"gfgfgfg", HeadQuaters:388865, Crops:"Vegetables"}
                          ] }
                  ] }
              ]);
      ]]&gt;
  &lt;/fx:Script&gt;
  
  &lt;mx:AdvancedDataGrid width="100%" height="100%" variableRowHeight="true"&gt;
      &lt;mx:dataProvider&gt;
          &lt;mx:HierarchicalData source="{dpHierarchy}"/&gt;
      &lt;/mx:dataProvider&gt;
      &lt;mx:columns&gt;
          &lt;mx:AdvancedDataGridColumn dataField="Country" headerText="Country"/&gt;
          &lt;mx:AdvancedDataGridColumn dataField="Category" headerText="Category"/&gt;
          &lt;mx:AdvancedDataGridColumn dataField="Population" headerText="Population"/&gt;
          &lt;mx:AdvancedDataGridColumn dataField="children" headerText="children"/&gt;
      &lt;/mx:columns&gt;
      &lt;mx:rendererProviders&gt;
          &lt;mx:AdvancedDataGridRendererProvider columnIndex="1" columnSpan="4" depth="2"
                                               renderer="InnerGrid"/&gt;
      &lt;mx:AdvancedDataGridRendererProvider columnIndex="2" columnSpan="3" depth="3"
                                           renderer="InnerChildGrid"/&gt;
      &lt;/mx:rendererProviders&gt;
  &lt;/mx:AdvancedDataGrid&gt;
  
   &lt;/s:Application&gt;
  </code></pre>
  
  <p>Here is my custom renderer [InnerGrid.mxml]</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:AdvancedDataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"&gt;
  &lt;fx:Declarations&gt;
      &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
  &lt;/fx:Declarations&gt;
  &lt;fx:Script&gt;
      &lt;![CDATA[
          override public function set data(value:Object):void {
              this.dataProvider = value;
          }
      ]]&gt;
  &lt;/fx:Script&gt;
  &lt;mx:columns&gt;
      &lt;mx:AdvancedDataGridColumn dataField="State" headerText="State"/&gt;
      &lt;mx:AdvancedDataGridColumn dataField="Language" headerText="Language"/&gt;
      &lt;mx:AdvancedDataGridColumn dataField="SoilColor" headerText="SoilColor"/&gt;
  &lt;/mx:columns&gt;
  
  &lt;/mx:AdvancedDataGrid&gt;
  </code></pre>
  
  <p>Here is my custom renderer [InnerChildGrid.mxml]</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:AdvancedDataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"&gt;
  &lt;fx:Declarations&gt;
      &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
  &lt;/fx:Declarations&gt;
  &lt;fx:Script&gt;
      &lt;![CDATA[
          override public function set data(ivalue:Object):void {
              this.dataProvider = ivalue.Districts;
          }
      ]]&gt;
  &lt;/fx:Script&gt;
  &lt;mx:columns&gt;
      &lt;mx:AdvancedDataGridColumn dataField="District"/&gt;
      &lt;mx:AdvancedDataGridColumn dataField="HeadQuaters"/&gt;
      &lt;mx:AdvancedDataGridColumn dataField="Crops"/&gt;
  &lt;/mx:columns&gt;
   &lt;/mx:AdvancedDataGrid&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/or3hG.png" alt="Showing States in different datagrids"></p>