apache-flexflash-builderadvanceddatagriddatafield

AdvancedDataGrid dataField - how to use a subarray or object in flex?


I have an advanced data grid in flex (flash builder 4). It's dataProvider is pointing to an ArrayCollection (this._encounters).

Inside that array collection is a property that is an object (a client object).

I tried setting the dataField to "clientObj.firstName" to refer to the first name property within the clientObj property of the this._encounters array collection. It did not show anything.

So, I added a labelFunction to that column (code below) to set the text in the cell. This works fine and now I have values showing in the grid.

The problem is now when I click the title of column to sort it. It throws an error that property clientObj.firstName is not found in my array collection!

So, is there a better way to set the dataField / source for a column and point at a property in a sub-object -- or a way to fix the sort?

Below the first column

<mx:AdvancedDataGrid x="0" y="25" id="adgEncounters" designViewDataType="flat" width="100%" height="100%" dataProvider="{this._encounters}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="first" dataField="clientObj.firstName" labelFunction="encounterGridLabelFunct"/>
<mx:AdvancedDataGridColumn headerText="first" dataField="thisWorksField"/>
</mx:columns>
</mx:AdvancedDataGrid>



protected function encounterGridLabelFunct(item:Object, column:AdvancedDataGridColumn):String //put just the HH:MM in to the grid, not the whole date string
{
 if(column.headerText=="first") result=item.clientObj.firstName;    
 return result;
}           

update: Here is the final working code I used. 3 example sort functions, 1 for numeric sorting, 1 for String sorting and one for Date sorting (string date from a database).:

// sort adg column numerically
            private function numericSortByField(subObjectName:String, fieldName:String):Function
            {
                return function(obj1:Object, obj2:Object):int
                {
                    var value1:Number = (obj1[subObjectName][fieldName] == '' || obj1[subObjectName][fieldName] == null) ? null : new Number(obj1[subObjectName][fieldName]);

                    var value2:Number = (obj2[subObjectName][fieldName] == '' || obj2[subObjectName][fieldName] == null) ? null : new Number(obj2[subObjectName][fieldName]);
                    return ObjectUtil.numericCompare(value1, value2);
                }
            }

            //sort adg column string
            private function stringSortByField(subObjectName:String, fieldName:String):Function
            {
                return function(obj1:Object, obj2:Object):int
                {
                    var value1:String = (obj1[subObjectName][fieldName] == '' || obj1[subObjectName][fieldName] == null) ? null : new String(obj1[subObjectName][fieldName]);

                    var value2:String = (obj2[subObjectName][fieldName] == '' || obj2[subObjectName][fieldName] == null) ? null : new String(obj2[subObjectName][fieldName]);
                    return ObjectUtil.stringCompare(value1, value2);
                }
            }

            //sort adg date diff (takes date strings for example from a db)
            private function dateSortByField(subObjectName:String, fieldName:String):Function
            {
                return function(obj1:Object, obj2:Object):int
                {
                    var value1:String = (obj1[subObjectName][fieldName] == '' || obj1[subObjectName][fieldName] == null) ? null : new String(obj1[subObjectName][fieldName]);

                    var value2:String = (obj2[subObjectName][fieldName] == '' || obj2[subObjectName][fieldName] == null) ? null : new String(obj2[subObjectName][fieldName]);

                    var value1Date:Date = new Date();
                    var value1Time:int = value1Date.setTime(Date.parse(value1));

                    var value2Date:Date = new Date();
                    var value2Time:int = value2Date.setTime(Date.parse(value2));


                    return ObjectUtil.numericCompare(value1Time, value2Time);
                }
            }

In the mxml above, this is the changed line - notice the stringSortByField added:

        <mx:AdvancedDataGridColumn headerText="first" dataField="clientObj.firstName" sortCompareFunction="{stringSortByField('clientObj','firstName')}" labelFunction="encounterGridLabelFunct"/>

If it were a numeric field use the numericSortByField. If it were a date string from a database, use the dateSortByField function instead.


Solution

  • You could use a custom compare function, thats how I do it (obviously your itemA and itemB will be different objects, so cast them as such):

    In your AdvancedDataGridColumn put in:

    sortCompareFunction="string_sortCompareFunc"
    

    and make the function:

    private function string_sortCompareFunc(itemA:Object, itemB:Object):int 
            {
                 var a:String = itemA as String;
                 var b:String = itemB as String;              
    
                 return ObjectUtil.stringCompare(a, b);
            }