Custom Sorting a Flash Form DataGrid

I found tons of posts across the web on how to do custom sorts of a dataGrid in Flash, but nothing about how to do it within CFFORM. It took me a little while to figure it out based on the Flash instructions, so I figured I'd write up a quick how-to.Just like in Flash, the dataGrid object has a headerRelease event that is fired when you click on the column headers. The tricky part, however, is turning off the built-in sorting. I've written up some example code, but I didn't get all fancy with building in a query or whatnot since the intent is to show what the code looks like and where to put it.

*FLASH Weirdness* For some reason, dataGrid indexes start with 1, and not 0. While natural to us CF folk, Flash usually starts with index 0.

Example Code: <cfform name="myForm" onload="formOnLoad()" format="Flash">
<cfformitem type="script">       public function formOnLoad():Void{          <!--- put the dataGrid in this scope --->          var myGrid:mx.controls.DataGrid = myGrid;                    <!--- custom grid sorting defaults --->          _root.lastColumnSorted = "";          _root.sortDesc = true;                    <!--- kill the default sort functionality for all columns --->          myGrid.getColumnAt(2).sortOnHeaderRelease = false;                    <!--- creat the listner object --->          var sortListener:Object = {};                    <!--- do the meat & potatoes --->          sortListener.headerRelease = function(event):Void {             if (event.columnIndex == 2) {                if (_root.lastColumnSorted == myGrid.getColumnAt(event.columnIndex).columnName) {                   <!--- if this column was previously sorted, sort it in the opposite direction --->                   if (_root.sortDesc) {                      _root.sortDesc = false;                   } else {                      _root.sortDesc = true;                   }                } else {                   _root.sortDesc = false;                }             }                          _root.lastColumnSorted = myGrid.getColumnAt(event.columnIndex).columnName;                          <!--- fire off the function that sorts the data. this example used remoting to re-populate the grid --->             _root.myGrid_RefreshData();          }                    myGrid.addEventListener("headerRelease",sortListener);       }    </cfformitem>
<cfgrid name="myGrid">
<cfgridcolumn name="StoreName" header="Store">
<cfgridcolumn name="StoreNumber" header="Store ##" type="numeric" dataalign="center" width="80">
<cfgridcolumn name="City" header="City" width="75" dataalign="center">
<cfgridcolumn name="State" header="State" dataalign="center" width="55">
</cfgrid>
</cfform>

Now, I didn't include all the boring remoting code just to keep the example code down in size, but the concepts should be clear nonetheless. The myGrid_RefreshData() function reads the variables I stored at _root, and passes them along to the database. If you wanted to just do internal dataGrid sorting, and not a new remoting call, the code you're looking for is:

myGrid.sortItemsBy("name of field", Array.NUMERIC); and myGrid.sortItemsBy("name of field", Array.NUMERIC|Array.DESCENDING);

Wow. My first blog post...and it's not even on my website ;)