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:

Refreshing the Binded dataprovider based on Custom Event in the Model

   Say you have an array of (Object) Sites shown in the data grid with labels Site Name. Also you have a column to delete the site as an item renderer in your sites list. There are easier ways to handle this scenario.

  onItemDelete(); => removeTheSiteFromTheDataProvider(); => refreshTheDataProvider();

Imagine if you were to bind the array as an instance of an object. Say applicationData.sites is a getter function that is bindable and returns a custom array of sites handled through the instance applicationData object. Also, you dont have a simpler deletion logic now. Now on deleting the site from the data grid, i would want you to process a few operations, based on the result of the same, either proceed to refresh or not. To write this whole logic outside the view in the applicationData (class/Model), you may have to do the following:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()"> <mx:DataGrid id="simpleSitesDG" x="10" y="10" width="199" height="104" dataProvider="{simpleSites}"> <mx:columns> <mx:DataGridColumn headerText="ID" dataField="id"/> <mx:DataGridColumn headerText="Name" dataField="name"/> <mx:DataGridColumn headerText="Delete"> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalAlign="center"> <mx:Image source="@Embed('assets/cancel2.png')" buttonMode="true" click="outerDocument.deleteSite(data)"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>

Here is the MX-Script part of it...
import mx.collections.ArrayCollection; private var dp:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { //Contains a large data of site objects var site1:Object = new Object(); site1.id = 100; site1.name = 'Land'; site1.area = 300; site1.height = 30; site1.width = 10; site1.owner = 'Arun'; dp.addItem(site1); //contains a large data of site object var site2:Object = new Object(); site2.id = 101; site2.name = 'Air'; site2.area = 400; site2.height = 40; site2.width = 10; site2.owner = 'Kiran'; dp.addItem(site2); dispatchEvent(new Event('dataChange')); } [Bindable(event="dataChange")] public function get simpleSites():ArrayCollection { var simpleSitesCollection:ArrayCollection = new ArrayCollection(); for(var i:int = 0; i < dp.length; i++) { //Just to mimic a slim object var newSlimObject:Object = new Object(); newSlimObject.id = dp[i].id; newSlimObject.name = dp[i].name; simpleSitesCollection.addItem(newSlimObject); } return simpleSitesCollection; } // Called when deletion is invoked... Assume you are writing this as a part of ApplicationData and not in the same view // As a simpler case, you can always remove the item from dp and say simpleSitesDG.dataprovider.refresh() assuming the dataprovider is directly set // But this is a dynamic event public function deleteSite(obj:Object = null):void { if(obj != null) { for(var i:int = 0; i < dp.length; i++) { if(dp[i] != null && dp[i].id == obj.id) { dp.removeItemAt(i); dispatchEvent(new Event('dataChange')); break; } } } }
Here is how the output will look like, when you delete the item, it throws up the event. This kind of dispatch is typically done in framework code and recommended practice.

Advanced Data Grid, Grouping based on Id but displaying Name

I had a small requirement to work up on the advanced data grid as below:

  a) There are a few vehicles (objects of type Vehicle)
  b) All these vehicles are to be grouped by their ID (there is a property by name id in the vehicle obj)
  c) But the grouping in the flex advanced data grid should be displayed with the vehicle name and not the vehicle id

  This is the simple example of using the "groupingFunction" on the grouping Field of the flex advanced data grid.

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="233" height="186"> <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); var obj22:Object = new Object(); obj22.id = 2; obj22.name = 'Another Two'; flatData.addItem(obj22); } private function getName(item:Object, field:GroupingField):String { var result:String = ''; //If you have loaded objects of multiple types you can check like this at runtime and have custom values sent out if(item is Object) { result = item.name; //item[field.name].toString().substr(0, 1); } else { result = ''; } return result; } ]]> </mx:Script> <mx:AdvancedDataGrid x="24" y="10" id="adg1" designViewDataType="tree" sortExpertMode="true" width="187"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id" groupingFunction="getName"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> </mx:Application>
Here is how it looks like as an output: (grouped by ID but shown as names)

Back to Basics - Event Propagation by Simple Example

    Its very common to ask this question in interviews related to flex but some on the application development background dont even bother to know these minor things. It doesnt deny them from getting onboard as well. But this has been the most favorite topic of Ananth (my Ex-director @ Flex Team). Okay, here is the glimpse of it in few words:

Capture phase: Flash Player checks every node from the root of the tree to the direct parent of the target node to see whether it has a listener registered to
handle the event.
Target phase: The event is dispatched to the target node.
Bubbling phase: Flash Player carries out a check in a reverse manner with respect to that of the capturing phase (starting from the direct parent of the target node to the root of the tree).

Here is a lay-man's sample:

There is obviously a lot more to it, but this is only a basic...

A pick of para from Flex Solutions..

 

    I just started to read the book "Flex solutions - Essential Techniques for Flex 2 and Flex 3" as i wantd to quickly browse through and the catchy first para stunned me making me comment on this to the author - Marco Casario (http://casario.blogs.com). Here is the snippet directly from the book.

 

"Since I first opened Flex Builder and learned the basics of Flex, I’ve fallen in love with it: a framework to create Flash applications easily. Thank God. The first version of Flex suffered from Macromedia’s poor market positioning of the technology (at that time, it was Macromedia, not Adobe). Flex 1 required an expensive server module to compile applications. How could I convince my boss to buy a Flex server just to make my life easier for Flash application development?"

     I had been part of the Macromedia and Adobe. I could see how things were when it was macromedia and how things turned on when it became adobe. Flex 2 was infact from Macromedia and not Adobe. The inception of flex had a lot of questions when it began to start on, but after the AS3 plunge and the version 2 seperation it had made its own way clearly. If the version 2 werent from macromedia a hit version, it would have been a life of JRun as adobe is clear on thier investments.