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)