Sorting columns in a flex datagrid

Question

The datagrid gets its data from a back end database which has records like

 RecordID           Division     Department      Date_Report_Submitted

1.                 Finance      Accounting        11/1/2010
2.                 Engineering  Design            4/2/2011
3.                 Engineering  Implementation    4/2/2011
4.                 Support      Chat_Support      2/4/2010

Clicking on the headers in the Datagrid column(Department) results in a sort based on recordID like

Division     Department      Date_Report_Submitted

Finance      Accounting        11/1/2010
Engineering  Design            4/2/2011
Engineering  Implementation    4/2/2011
Support      Chat_Support      2/4/2010

whereas I want it to be sorted alphabetically for the Datagrid column(Department) like

Division     Department      Date_Report_Submitted

Finance      Accounting        11/1/2010
Support      Chat_Support      2/4/2010
Engineering  Design            4/2/2011
Engineering  Implementation    4/2/2011

since Accounting should come before Chat_Support as per lexicographical order.

Looked at http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/#more-590 and have something like

     <mx:DataGrid id="myRecords"  dataProvider="{myRecords_dp}" width="810" height="274"                         

itemClick="getRecordData(event)">
    <mx:columns>
        <mx:DataGridColumn id="firstCol" width="180" fontFamily="Arial" fontSize="12"
                           wordWrap="true" />
        <mx:Button label="Click to Sort" click="mysort()" />
    </mx:columns>
</mx:DataGrid>

and

private function mysort():void
{
   var sortField:SortField = new SortField();
   sortField.compareFunction = mycompare;
   sortField.descending = false;

   var sort:Sort = new Sort();
   sort.fields = [sortField];

   myRecords.sort = sort;
   myRecords.refresh();
}


                  private function mycompare(lhs:Object, rhs:Object):int
{
  var valueA:String = lhs.text();
  var valueB:String = rhs.text();
  return ObjectUtil.stringCompare(valueA, valueB);

}

I get errors like

1061: Call to a possibly undefined method refresh through a reference with static type mx.controls:DataGrid.
for myRecords.refresh(); and

Access of possibly undefined property sort through a reference with static type mx.controls:DataGrid.
for myRecords.sort

Any suggestions would be appreciated.

Clicking on a header should sort the label the way you want by default; not by a 'recordID' not displayed in the grid. — JeffryHouser
Unfortunately, that is what is occurring. Clicking on the header sorts by recordID which is not displayed on the grid — Mike J

JeffryHouser JeffryHouser · Accepted Answer · 2011-10-14T18:33:35

The code in your question is a bit of a mess. For example, you cannot use a button as a column inside a DataGrid. That gives a compiler error.

Nevertheless, I put together a sample, based off your sample data and the code you shared, in order to show you that DataGrid sorting does not work the way you claim it does.

Play with it here.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600" viewSourceURL="srcview/index.html">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable] 
            public var myRecords_dp : ArrayCollection = new ArrayCollection([
                {recordID:1, division:'Finance', department:'Accounting', Date_Report_Submitted:new Date(2010,11,1)},
                {recordID:2, division:'Engineering', department:'Design', Date_Report_Submitted:new Date(2010,4,2)},
                {recordID:3, division:'Engineering', department:'Implementation', Date_Report_Submitted:new Date(2011,4,2)},
                {recordID:4, division:'Support', department:'Chat_Support   ', Date_Report_Submitted:new Date(2010,2,4)},
            ])

            public function mysort():void{

            }

            public function getRecordData(event:Event):void{

            }
        ]]>
    </fx:Script>

    <mx:DataGrid id="myRecords"  dataProvider="{myRecords_dp}" width="810" height="274"                         
                 itemClick="getRecordData(event)"> 
        <mx:columns>
            <mx:DataGridColumn id="firstCol" width="180" fontFamily="Arial" fontSize="12"
                               wordWrap="true" dataField="division" />
            <mx:DataGridColumn id="secondCol" width="180" fontFamily="Arial" fontSize="12"
                               wordWrap="true" dataField="department" />
            <mx:DataGridColumn id="thirdCol" width="180" fontFamily="Arial" fontSize="12"
                               wordWrap="true" dataField="Date_Report_Submitted" />
<!--            <mx:Button label="Click to Sort" click="mysort()" />-->
        </mx:columns>
    </mx:DataGrid>


</s:Application>

To get more help with your issue; you're going to have to share some real code to demonstrate some issue; not a mish-mash of non-compileable stuff you found on the Internet.

Sorting columns in a flex datagrid

2 Answers