labelFunction and sortCompareFunction and large data sets in Flex

OK, below is a simplified example of what I have to do.

So far so good, works A1. The IDs are replaced by the friend name, and the column is sortable.

Now, I have to apply this to a system containing thousands of IDs and thousands of rows.

I tried it and wooooooooooo, it is so slow, impossible to deliver something like this to a client...

What would be, in your opinion, the best approach to achieve the same goal?

The only idea I had is instead of storing only the ID in the DB, to store the names as strings too... I just thing it is information I shouldn't have to store...

Anybody have an idea? Another way to sort the rendered string instead of having to recall the fId.labelFunction(obj1, fId) on each row?

THANKS A LOT!

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        [Bindable]
        private var _friendList:ArrayCollection = new ArrayCollection([
            {friend_id : 1},
            {friend_id : 3},
            {friend_id : 2},
            {friend_id : 2},
            {friend_id : 1},
            {friend_id : 2},
            {friend_id : 1},
            {friend_id : 3}
        ]);

        private function friendNameFromID(item:Object, column:DataGridColumn):String
        {
            var id:int = item[column.dataField];

            if (id == 1)
                return "Thomas";

            if (id == 2)
                return "Anthony";

            if (id == 3)
                return "George"

            return "";
        }

        private function sortFromFriendName(obj1:Object, obj2:Object):int
        {
            var value1:String = fId.labelFunction(obj1, fId);
            var value2:String = fId.labelFunction(obj2, fId);

            if (value1 == value2)
                return 0;
            else if (value1 > va开发者_JAVA技巧lue2)
                return 1;
            else
                return -1;
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:DataGrid id="myDataGrid" dataProvider="{_friendList}" width="90%" height="90%" horizontalCenter="0" verticalCenter="0">
    <mx:columns>
        <mx:DataGridColumn dataField="friend_id"/>
        <mx:DataGridColumn id="fId" dataField="friend_id" labelFunction="friendNameFromID" sortCompareFunction="sortFromFriendName"/>
    </mx:columns>
</mx:DataGrid>

What about paging your data? It's not only your headache to filter all those bunch of rows. The user also can complain ;)

Here's just a first thing that I've found as example: Advanced Paging and Filtering in Flex Datagrid

Instead of doing a bunch of if(..) have u tried using a Dictionary object, setting the id as the key and the name as the value? If I'm not mistaken, access into a Dictionary is done using a hash function and is much faster than a series of if statements.

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="buildNameDictionary()"
>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        private var nameDictionary:Dictionary;

        [Bindable]
        private var _friendList:ArrayCollection = new ArrayCollection([
            {friend_id : 1},
            {friend_id : 3},
            {friend_id : 2},
            {friend_id : 2},
            {friend_id : 1},
            {friend_id : 2},
            {friend_id : 1},
            {friend_id : 3}
        ]);

        private function buildNameDictionary():void
        {
            nameDictionary= new Dictionary();
            nameDictionary[1] = "Thomas";
            nameDictionary[2] = "Anthony";
            nameDictionary[3] = "George";
        }

        private function friendNameFromID(item:Object, column:DataGridColumn):String
        {
            if(nameDictionary[item])
                return nameDictionary[item] as String

            return "";
        }

        private function sortFromFriendName(obj1:Object, obj2:Object):int
        {
            var value1:String = fId.labelFunction(obj1, fId);
            var value2:String = fId.labelFunction(obj2, fId);

            if (value1 == value2)
                return 0;
            else if (value1 > value2)
                return 1;
            else
                return -1;
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:DataGrid id="myDataGrid" dataProvider="{_friendList}" width="90%" height="90%" horizontalCenter="0" verticalCenter="0">
    <mx:columns>
        <mx:DataGridColumn dataField="friend_id"/>
        <mx:DataGridColumn id="fId" dataField="friend_id" labelFunction="friendNameFromID" sortCompareFunction="sortFromFriendName"/>
    </mx:columns>
</mx:DataGrid>