Performing case [in]sensitive sorts using the DataGrid control in Flex

The following example shows how you can perform numeric sorts, case sensitive sorts, or case insensitive sorts in the Flex DataGrid control by setting a custom sort compare function on the DataGridColumn using the sortCompareFunction property, the static ObjectUtil.numericCompare() method, and the static ObjectUtil.stringCompare() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            private function index_sortCompareFunc(itemA:Object, itemB:Object):int {
                // Make sure itemA has an "index" property.
                if (!itemA.hasOwnProperty("index")) {
                    itemA.index = null;
                }
                // Make sure itemB has an "index" property.
                if (!itemB.hasOwnProperty("index")) {
                    itemB.index = null;
                }
                // Perform a numeric sort.
                return ObjectUtil.numericCompare(itemA.index, itemB.index);
            }

            private function value_sortCompareFunc(itemA:Object, itemB:Object):int {
                // Make sure itemA has a "value" property.
                if (!itemA.hasOwnProperty("value")) {
                    itemA.value = null;
                }
                // Make sure itemB has a "value" property.
                if (!itemB.hasOwnProperty("value")) {
                    itemB.value = null;
                }
                /**
                 * Perform a string sort. If the checkbox is selected
                 * do a case insensitive sort, otherwise, dont.
                 */
                return ObjectUtil.stringCompare(itemA.value, itemB.value, checkBox.selected);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object index="1" value="apple" />
                <mx:Object index="200" value="Bear" />
                <mx:Object index="3" value="corn" />
                <mx:Object index="40" value="Dragon" />
                <mx:Object value="eggplant" />
                <mx:Object index="5" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="case insensitive search:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}">
        <mx:columns>
            <mx:DataGridColumn dataField="index"
                    sortCompareFunction="index_sortCompareFunc" />
            <mx:DataGridColumn dataField="value"
                    sortCompareFunction="value_sortCompareFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Tagged as: sortCompareFunction, stringCompare