Show No Leaf, Parent Nodes in grouped Flex Advanced data grid

   I hit upon this scenario which is unique to one of my project. I would like to describe it in my own words taking a simple example. This example is targetted at showing the empty PARENT nodes (as empty folders) of the advanced data grid when the LEAF node is not present.

  There is a reservation system where the reservation is made for 4 nights. Each night can contain an optional vehicle (can contain one or more vehicles). Lets take a scenario where the first three nights of the reservation object having vehicles, but the fourth reservation does not have vehicles. Now you are asked to provide a dynamic-UI in the flex Advanced data grid to show the fourth night (a parent node) of a grouped data whose child does not exist. So when they want to add a vehicle later they can select the button to add vehicles for the fourth night.

  I am not sure if i had made it clear when i described above (here i go with an example).. I have "1" and "2" grouped as they are grouped by the property "id" and that internally contains children. So they look fine. Look at the code below:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="241" height="214"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var flatData:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { var obj1:Object = new Object(); obj1.id = 1; obj1.name = 'One'; flatData.addItem(obj1); var obj11:Object = new Object(); obj11.id = 1; obj11.name = 'Another One'; flatData.addItem(obj11); var obj2:Object = new Object(); obj2.id = 2; obj2.name = 'Two'; flatData.addItem(obj2); } ]]> </mx:Script> <mx:AdvancedDataGrid x="24" y="15" id="adg1" designViewDataType="tree" sortExpertMode="true" width="187"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="ID" dataField="id"/> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> <mx:Button x="24" y="179" label="Add to Selected Row of ADG"/> </mx:Application>

Here is how the current code output looks like... Its traditionally grouped by id as long as they have their children (name) fine with them.

Now all i want is - Have a parent with id = "3" shown as a folder on the grouped collection, so i now have an option to select the id="3" empty folder and add something to it (assuming there is no name already to it and user wants to add names dynamically by clicking on the button by selecting the row with id="3")

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="325" height="218"> <mx:Script> import mx.collections.IHierarchicalCollectionView; import mx.collections.ArrayCollection; [Bindable] private var flatData:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { var obj1:Object = new Object(); obj1.id = 1; obj1.name = 'One'; flatData.addItem(obj1); var obj11:Object = new Object(); obj11.id = 1; obj11.name = 'Another One'; flatData.addItem(obj11); var obj2:Object = new Object(); obj2.id = 2; obj2.name = 'Two'; flatData.addItem(obj2); } private function addDummyParentNode(dummyValue:Number = 5):void { var dp:IHierarchicalCollectionView = groupedADG.dataProvider as IHierarchicalCollectionView; var groupedData:ArrayCollection = (dp.source as GroupingCollection).source as ArrayCollection; for(var j:int = 0; j < groupedData.length; j++) { var item:Object = groupedData[j] as Object; if(dummyValue == Number(item.id)) { break; } else { var dummyParentNode:Object = {"id":3, children:[]}; dp.addChild(null, dummyParentNode); groupedADG.dataProvider = dp; groupedADG.validateNow(); groupedADG.dataProvider.refresh(); break; } } } </mx:Script> <mx:AdvancedDataGrid id="groupedADG" x="10" y="15" designViewDataType="tree" sortExpertMode="true" width="305"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="ID" dataField="id"/> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> <mx:Button x="10" y="179" label="Add a grouped parent id=3 folder with no child" width="305" click="addDummyParentNode()"/> </mx:Application>

In the above, i have just tried to check if the data already has a item or not.. I am just adding this for someone to know that it could be done...

Here is how the output will look like: