Flex Nested data grid - datagrid

Question

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.
Here is my mxml
<?xml version="1.0" encoding="utf-8"?>
<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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![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"}
] }
] }
]);
]]>
</fx:Script>
<mx:AdvancedDataGrid width="100%" height="100%" variableRowHeight="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Country" headerText="Country"/>
<mx:AdvancedDataGridColumn dataField="Category" headerText="Category"/>
<mx:AdvancedDataGridColumn dataField="Population" headerText="Population"/>
<mx:AdvancedDataGridColumn dataField="children" headerText="children"/>
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider columnIndex="1" columnSpan="4" depth="2"
renderer="InnerGrid"/>
<mx:AdvancedDataGridRendererProvider columnIndex="2" columnSpan="3" depth="3"
renderer="InnerChildGrid"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</s:Application>
Here is my custom renderer [InnerGrid.mxml]
<?xml version="1.0" encoding="utf-8"?>
<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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
this.dataProvider = value;
}
]]>
</fx:Script>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="State" headerText="State"/>
<mx:AdvancedDataGridColumn dataField="Language" headerText="Language"/>
<mx:AdvancedDataGridColumn dataField="SoilColor" headerText="SoilColor"/>
</mx:columns>
</mx:AdvancedDataGrid>
Here is my custom renderer [InnerChildGrid.mxml]
<?xml version="1.0" encoding="utf-8"?>
<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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
override public function set data(ivalue:Object):void {
this.dataProvider = ivalue.Districts;
}
]]>
</fx:Script>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="District"/>
<mx:AdvancedDataGridColumn dataField="HeadQuaters"/>
<mx:AdvancedDataGridColumn dataField="Crops"/>
</mx:columns>
</mx:AdvancedDataGrid>

Answer 1

I solved the problem, I am attaching the code for someone to refer in future
[Application mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
private var masterData:Array = [
{ OrderId: 10248, CustomerId:"WILMK", EmployeeId:5, OrderDate:"1-Feb-2007",
children:[
[
{ProductId:11, ProductName:"Quesbo Cabrales", UnitPrice:14, Quantity:12, Discount:0, Price:168, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
{ProductId:42, ProductName:"Singaporean Hokkien Fried Mee", UnitPrice:9.8, Quantity:10, Discount:0, Price:98, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
{ProductId:42, ProductName:"Mozzarella di Giovanni", UnitPrice:34.8, Quantity:5, Discount:0, Price:174, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]}
]
]},
{ OrderId: 10249, CustomerId:"TRADH", EmployeeId:6, OrderDate:"3-Feb-2007",
children:[
[
{ProductId:51, ProductName:"Manjimup Dried Appels", UnitPrice:42.4, Quantity:40, Discount:0, Price:1696, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
{ProductId:14, ProductName:"Tofu", UnitPrice:18.6, Quantity:9, Discount:0, Price:167.4, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]}
]
]},
{ OrderId: 10250, CustomerId:"HANAR", EmployeeId:4, OrderDate:"4-Feb-2007",
children:[
[
{ProductId:51, ProductName:"Manjimup Dried Appels", UnitPrice:42.4, Quantity:35, Discount:0.15, Price:1261, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
{ProductId:41, ProductName:"Jack's Clam Chowder", UnitPrice:7.7, Quantity:10, Discount:0, Price:77, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
{ProductId:65, ProductName:"Hot pepper Sauce", UnitPrice:16.8, Quantity:10, Discount:0.15, Price:214.2, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]}
]
]}
];
]]>
</mx:Script>
<mx:AdvancedDataGrid dataProvider="{new HierarchicalData(masterData)}" variableRowHeight="true" width="600" height="600">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="OrderId" headerText="Ordere ID" width="100"/>
<mx:AdvancedDataGridColumn dataField="CustomerId" headerText="Customer ID" />
<mx:AdvancedDataGridColumn dataField="EmployeeId" headerText="Employee ID" />
<mx:AdvancedDataGridColumn dataField="OrderDate" headerText="Order Date" />
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider depth="2" columnIndex="1" renderer="DetailGrid" columnSpan="0" />
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>
[DetailGrid.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns="*" variableRowHeight="true" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
override public function set data(value:Object):void
{
dataProvider=new HierarchicalData(value);
this.rowCount = value.length+5;
// dataProvider = value;
}
]]>
</mx:Script>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="ProductId" headerText="Product ID" />
<mx:AdvancedDataGridColumn dataField="ProductName" headerText="Product Name" />
<mx:AdvancedDataGridColumn dataField="UnitPrice" />
<mx:AdvancedDataGridColumn dataField="Discount" />
<mx:AdvancedDataGridColumn dataField="Price" />
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider depth="2" columnIndex="1" renderer="InnerDetailGrid" columnSpan="5" />
</mx:rendererProviders>
</mx:AdvancedDataGrid>
[InnerDetailGrid.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
{
dataProvider = value;
this.rowCount = value.length+1;
}
]]>
</mx:Script>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="count" headerText="count" />
<mx:AdvancedDataGridColumn dataField="place" headerText="place" />
<mx:AdvancedDataGridColumn dataField="Amount" headerText="Amount" />
</mx:columns>
</mx:AdvancedDataGrid>
Here is the final o/p