Monday, January 3, 2011

Handle Data Sorting in DataGridColumn of Flex DataGrid When Data in embedded object within object

When you put the data in dataGridColumn, by default the sorting is handled by considering the content to be String. So when the content is number, then the sorting is not as expected. In Such a case you need to define your custom sorting function.

public class DataObject{
   private var _objName:String;
   
   public function get objName():String {
      return _objName;
   }

   public function set objName(value:String):void {
      _objName=value;
   }

   private var _property:EmbeddedObject;

   public function property():EmbeddedObject{
      return _property;
   }

   public function set property(value:EmbeddedObject):void {
      _property=value;
   }
}

and EmbeddedObject being defined as

public class EmbeddedObject{
   private var _value:Number;

   public function get value():Number {
      return _value;
   }

   public function set value(value:String):void {
      _value=value;
   }

}

Now in you mxml application file:

private var embeddedobject:String="";
private var value:String="";

private function setTypes(event:DataGridEvent):void {
   var components:Array = event.dataField.split(".");
   embeddedobject= components[0];
   value = components[1];
}

private function customSort(obj1:Object, obj2:Object):int{
   var component1:Number = (obj1[embeddedobject])[value];
   var component2:Number = (obj2[embeddedobject])[value];

   if( component1 <> component
      return -1;
   } else if( component1 == component2 ){
      return 0;
   }

   return 1;
}

<mx:DataGrid headerRelease="setTypes(event)" height="100%" dataProvider="{data}" >
  <mx:DataGridColumn dataField="objName" headerText="objName"/>
  <mx:DataGridColumn dataField="property.value" headerText="embeddedObjName" sortCompareFunction="customSort"/>
/>








Handle Data Display in DataGridColumn of Flex DataGrid When Data in embedded object within object

suppose the data received is var data:ArrayCollection, data being set to the array of object DataObject defined as

  public class DataObject {
    private var _objName : String;
    
    public function get objName() : String {
       return _objName;
    }

    public function set objName(value : String) : void {
      _objName = value;
    }

    private var _property : EmbeddedObject;
    
    public function property() : EmbeddedObject {
      return _property;
    }

    public function set property(value : EmbeddedObject) : void {
      _property = value;
    }

and EmbeddedObject being defined as

  public class EmbeddedObject {
    private var _embeddedObjName : String;

    public function get embeddedObjName() : String { 
      return _embeddedObjName; 
    }
      
    public function set embeddedObjName(value:String) : void {
      _embeddedObjName = value;
    }
}

Now when you want to display the variable from EmbeddedObject you can do following:

  <mx:DataGridColumn dataField="objName" headerText="objName"/>
  <mx:DataGridColumn dataField="property.embeddedObjName" headerText="embeddedObjName"/>