Flex DataGrid - how to pass the cell's displayed value to the sortCompareFunction?

Question

I have a dataGrid in which I use a labelFunction on a column. This changes the dataField to a different value.

I have a sortCompareFunction on the the same column. But, the sortCompareFunction just uses the underlying data items value.

I know I can call the labelFunction from within the sortCompareFunction to change the values before doing a comparison, but what I want to do is: pass the displayed value from the column to the sortCompareFunction. Is this possible.

Some sample code below to represent the problem (works if you copy and past to a new Flex 3 application)

In the image, the data behind the value "AAAAA" is "The Wall", so it appears in the centre when doing a sort, I want access to the "AAAA" value:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                initialize="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;

            [Bindable]
            private var albums:ArrayCollection;

            private function init():void
            {
                var album:Object;
                albums = new ArrayCollection();

                album = new Object();
                album.name = "Who's Next";
                album.artist = "The Who";
                album.date = "Jul 31 1971";
                albums.addItem(album);

                album = new Object();
                album.name = "Exile on Main St.";
                album.artist = "The Rolling Stones";
                album.date = "May 12 1972";
                albums.addItem(album);

                album = new Object();
                album.name = "The Wall";
                album.artist = "Pink Floyd";
                album.date = "Dec 8 1979";
                albums.addItem(album);
            }

            private function nameLabelFunction(inData:Object, inColumn:DataGridColumn):String
            {
                if(inData.name == "The Wall")
                {
                    return "AAAA"
                }
                else
                    return inData.name;
            }

            private function nameSortCompare(obj1:Object, obj2:Object):int
            {
                return ObjectUtil.stringCompare(obj1["name"], obj2["name"], true);
            }

        ]]>
    </mx:Script>
    <mx:DataGrid width="400" height="600" dataProvider="{albums}">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name" width="125" 
                               labelFunction="nameLabelFunction"
                               sortCompareFunction="nameSortCompare"/>

            <mx:DataGridColumn dataField="artist" headerText="Artist" width="125" />

            <mx:DataGridColumn dataField="date" headerText="Date" width="100" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

Answer 1

Can we use a little trick?

        private function nameLabelFunction(inData:Object, inColumn:DataGridColumn):String
        {
            if(inData.name == "The Wall")
            {
                inData.realLabel = 'AAAA';

                return "AAAA"
            }
            else
            {
                inData.realLabel = inData.name;

                return inData.name;
            }
        }

        private function nameSortCompare(obj1:Object, obj2:Object):int
        {
            return ObjectUtil.stringCompare(obj1["realLabel"], obj2["realLabel"], true);
        }

//EDIT

Another approach to use the labelFunction itself

You can use the Function to evaluate the values being compared

Suppose f is an Object of class Function, then

f.call(dg.columns[0], obj1, dg.columns[0])

gives you the actual label of the datagrid field.

//this function should not be changed
        private function nameLabelFunction(inData:Object, inColumn:DataGridColumn):String
        {
            if(inData.name == "The Wall")
                return "AAAA"
            else
                return inData.name;
        }

//the actual comparison looks now like this:
        private function nameSortCompare(obj1:Object, obj2:Object):int
        {
            var f:Function = (dg.columns[0] as DataGridColumn).labelFunction;

            return ObjectUtil.stringCompare(f.call(dg.columns[0], obj1, dg.columns[0]), f.call(dg.columns[0], obj2, dg.columns[0]), true);
        }