Default Sorting for a Flex DataGrid

While working on the DeveloperCircuit Flex widget, I had the need to set a default sorting for a Flex DataGrid control. The standard control does not provide a mechanism to do this.

The Flex documentation suggests that you sort the underlying dataset, however I felt that this was very unsatisfactory. When you manually sort a DataGrid, the column which is being used to sort the data and the order of the sort, ascending or descending, is shown by the way of little black arrow in the column header. I felt that the default sorting should also be communicated to the user by this mechanism.

After some experimentation, this is the solution I came up with. There is a DataGrid event which is called when the user sorts a column. By announcing this event manually, once the underling data set has been returned by a call to a back end server, one can simulate the user action and set the default sorting of the DataGrid, complete with arrow. Example below:

<mx:RemoteObject
	id="someService"
	destination="ColdFusion"
	source="{this.someServiceLocation}"
	showBusyCursor="false"
	result="this.someDataGrid.dispatchEvent
	(
		new DataGridEvent
		(
			DataGridEvent.HEADER_RELEASE,
			false,
			true,
			0,	// The zero-based index of the column to sort in the DataGrid object's columns array.
			null,
			0,
			null,
			null,
			0
		)
	);"
/>

This entry was posted on Friday, June 15th, 2007 at 7:43 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

19 Responses to “Default Sorting for a Flex DataGrid”

  1. Inigo Says:
    August 20th, 2007 at 11:56 am

    Thanks for the tip, it worked nicely!

  2. LV Says:
    August 22nd, 2007 at 4:37 pm

    +1

  3. Steve Kwan Says:
    October 1st, 2007 at 9:58 pm

    Works perfectly! Thanks. I’m surprised Flex doesn’t have this by default.

  4. Alistair Says:
    October 27th, 2007 at 4:35 pm

    David you are a lifesaver. This has been driving me nuts for days. Thanks.

  5. Homer Says:
    November 21st, 2007 at 10:05 pm

    That just ended an hour of head-banging. Thanks!

  6. Josh Says:
    November 26th, 2007 at 6:10 pm

    Thanks for posting this, it’s EXACTLY what I needed!

  7. Gregor Rot Says:
    December 4th, 2007 at 6:01 pm

    Hi there, nice - i was working on this code for some time now in the hope to be able to also specify in which direction (ascending, descending) the sort on the grid is shown, but no luck :( Did you manage to do it? Tnx

  8. David Says:
    December 5th, 2007 at 10:44 pm

    @Gregor - The only thing I can think of is to issues either one, or two DataGridEvent.HEADER_RELEASE events depending on the required sort order.

  9. Max Says:
    December 19th, 2007 at 6:29 pm

    Thanks a lot mate! That’s just what i needed. So why the heck didn’t Adobe implement something like this?!

  10. Gabriel Says:
    June 19th, 2008 at 10:36 pm

    Thanks for the idea! I used it with the AdvancedDataGrid dispatching the event AdvancedDataGridEvent.SORT.

  11. Bob Tate Says:
    June 27th, 2008 at 3:13 pm

    Thank you for this little snippet. It was indeed the answer to what it was I was looking for. As I am still new to Flex it took me a little bit to understand what it was that was taking place here. Once I did it was great. I made a slight modification to it so that it may be more easily reusable code by placing this in a function. The code is below. I hope that this helps others looking for this.

    private function dgSort(dgName:Object, dgColumn:int):void
    {
    /**
    * The dgSort functions requires two input items. The dgName which as the variable suggest
    * is the name of the DataGrid and the dgColumn, DataGrid Column, to be sorted by the numbers.
    * column numbering begins with zero.
    *
    * These input items are used with the DataGridEvent below and is dispatched (excuted). The
    * DataGridEvent has a total of 9 values for successful operation. They are listed below in expanded detail.
    *
    * 1. type:String — The event type; indicates the action that caused the event. This is represented by the
    * dgName input variable. The DataGridEvent.HEADER_RELEASE constant defines the value of the type property
    * of the event object for a headerRelease event, which indicates that the user pressed and released the
    * mouse on a column header
    *
    * 2. bubbles:Boolean (default = false) — Specifies whether the event can bubble up the display list
    * hierarchy.
    *
    * 3. cancelable:Boolean (default = false) — Specifies whether the behavior associated with the event can
    * be prevented.
    *
    * 4. columnIndex:int (default = -1) — The zero-based index of the column where the event occurred. This
    * is represented by the dgColumn input variable.
    *
    * 5. dataField:String (default = null) — The name of the field or property in the data associated with
    * the column.
    *
    * 6. rowIndex:int (default = -1) — The zero-based index of the item in the in the data provider.
    *
    * 7. reason:String (default = null) — The reason for an itemEditEnd event.
    *
    * 8. itemRenderer:IListItemRenderer (default = null) — The item renderer that is being edited or the
    * header renderer that was clicked.
    *
    * 9. localX:Number — Column x-position for replaying columnStretch events.
    */

    dgName.dispatchEvent(
    new DataGridEvent
    (
    DataGridEvent.HEADER_RELEASE,
    false,
    true,
    dgColumn,
    null,
    0,
    null,
    null,
    0
    )
    )
    }

  12. Bob Tate Says:
    June 30th, 2008 at 3:01 pm

    Gabriel,

    I would love to know how it is that you managed to get the AdvancedDataGrid to do a default sort. So far I have been having no luck with that one and it would be a gret help as the current project I am on has at least one ADG that will initial be sorted on at least 3 fields.

  13. Darrell Says:
    July 26th, 2008 at 2:25 am

    Nicely done - thanks David and Bob (for the function). Small point for the noobs out there (which I fell foul of) … make sure you have the ‘import mx.events.DataGridEvent;’ defined otherwise the function bombs out with a [1120: Access of undefined property DataGridEvent.].

    Small question - I’m using this to auto-sort a datagrid by date column - date info is stored in YYYY-MM-DD format so gets round any Flex date understanding nightmares. The dgSort function above sorts in ascending order initially whereas I want it in descending order (i.e. newest dates top). Is there any way to specify one of the parameters above to do this? At the moment my workaround is to call the dgSort twice but it would be nice to save some cpu cycles. Any ideas appreciated.

    Thanks, Darrell.

  14. Elvis Fernandes Says:
    August 15th, 2008 at 1:49 pm

    Great! A simple solution for an annoying problem!

    Thanks!!!

  15. venkat Says:
    August 24th, 2008 at 7:12 am

    Hi,

    I am doing a server side sort and getting the new dataset on header release of a datagrid. But i am not getting the default sort arrow. If i dispatch a new data grid header release event in the result handler, it is going in an infinite loop.

    please give some clues, i m new to flex.

    Thanks,
    Venkat.

  16. Daniela Says:
    September 19th, 2008 at 11:05 pm

    Much thank you!! just saved my day =]

  17. phu Says:
    September 22nd, 2008 at 7:17 pm

    Many thanks !! i’ve been searching for this for 2 days now. thanks for putting me outta my misery.
    like Gabriel i dispatched AdvancedDataGridEvent.SORT event. using this on a Flex app.

  18. David Says:
    October 11th, 2008 at 4:52 pm

    This is excellent - however, it alternates between ascending and descending sort each time - a bit annoying!

  19. Ashwin Says:
    December 2nd, 2008 at 7:34 am

    Thanks :-) it works without any problems.

Leave a Reply

Copyright © 2005, David Beale

  • Valid XHTML 1.0!
  • Valid CSS
  • Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0