FLEX{er}

What I mean in the title is this: having a data grid with a column containing some priorities (like: urgent, normal, high) among other columns, you want to sort by this priority column, but you notice that is not sorted by its importance but alphabetically. To make it crystal clear follow the example bellow…

Having the following XML structure:

<root>
    <row>
        <priority>low</priority>
        <col2>a</col2>
        <priority_int>1</priority_int>
    </row>
    <row>
        <priority>extremely urgent</priority>
        <col2>f</col2>
        <priority_int>6</priority_int>
    </row>
    <row>
        <priority>normal</priority>
        <col2>b</col2>
        <priority_int>2</priority_int>
    </row>
    <row>
        <priority>high</priority>
        <col2>d</col2>
        <priority_int>4</priority_int>
    </row>
    <row>
        <priority>urgent</priority>
        <col2>e</col2>
        <priority_int>5</priority_int>
    </row>
    <row>
        <priority>medium</priority>
        <col2>c</col2>
        <priority_int>3</priority_int>
    </row>
</root>

When you’ll sort by the first column it will be sorted alphabetically. The first column will contain: “low“, “extremely urgent“, “normal“, “high“, “urgent” and “medium” strings which, normally, will be sorted to: “extremely urgent“, “high“, “low“, “medium“, “normal” and “urgent” (see bellow).

This is a correct sorting and this is how dataGrid should sort but is not what we want. We want to be sorted by its real priority.

For this we will use sortCompareFunction attribute/property of DataGridColumn like in the code bellow:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute">
    <mx:DataGrid x="10" y="10" height="200" width="350" 
        dataProvider="{_xmlData.children()}">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" 
                dataField="priority" 
                sortCompareFunction="externalSort"/>
            <mx:DataGridColumn headerText="Column 2" 
                dataField="alpha"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Script>
        <![CDATA[
 
            // our data provider
            [Bindable]
            private var _xmlData:XML = 
                <root>
                    <row>
                        <priority>low</priority>
                        <alpha>a</alpha>
                        <priority_int>1</priority_int>
                    </row>
                    <row>
                        <priority>extremely urgent</priority>
                        <alpha>f</alpha>
                        <priority_int>6</priority_int>
                    </row>
                    <row>
                        <priority>normal</priority>
                        <alpha>b</alpha>
                        <priority_int>2</priority_int>
                    </row>
                    <row>
                        <priority>high</priority>
                        <alpha>d</alpha>
                        <priority_int>4</priority_int>
                    </row>
                    <row>
                        <priority>urgent</priority>
                        <alpha>e</alpha>
                        <priority_int>5</priority_int>
                    </row>
                    <row>
                        <priority>medium</priority>
                        <alpha>c</alpha>
                        <priority_int>3</priority_int>
                    </row>
                </root>;
 
            // sorting function
            // we use this to sort by another column
            private function externalSort(o1:Object,o2:Object):int
            {
                // sorting by third column
                if (o1.priority_int > o2.priority_int)
                    return -1;
                else if (o1.priority_int < o2.priority_int)
                    return 1;
                else
                    return 0;
            }
        ]]>
    </mx:Script>
</mx:Application>

We instructed the DataGridColumns to use externalSort function for sorting and externalSort compares two adjacent rows applying to them the specified condition. Now lets see our data grid.

Now it works how we wanted, is sorting by its real priority.

Code can be downloaded at the end.

Share and Enjoy: