Flex developer tip: initialising a datagrid with a sorted column

! Warning: this post hasn't been updated in over three years and so may contain out of date information.

The Basic Datagrid
If you use Flex, then you are likely – sooner rather than later – to find yourself using the datagrid component. On the whole, it’s a really powerful and fairly easy to use component. There is one caveat to this though and that is the way column sorting occurs. Consider the following code:

This results in the following SWF:

As you can see, the data is presented in the datagrid in the same order as the code defines it. Click on one of the column headers and it sorts that column. Click again and it reverse sorts the column. This is great, unless you want the datagrid to start up with on of the columns sorted. That’s when the fun starts.

An Automatically Sorted Datagrid
If you read through the API documentation for the datagrid, it is really vague on how sorting occurs and there is no obvious way of initialising a datagrid in a sorted state. In the past, I have tried all sorts of ways of ways, including simulating a click event on the column header to force a sort and even creating a datagrid subclass that overrides a lot of the sort arrow placement code to force a sort arrow to appear at start up. Such techniques though are messy, unreliable and there was always this nagging feeling that I’d missed something obvious.

Recently I applied a bit of lateral thinking – and a lot of googling – to the problem and I discovered the proper way to solve this problem. It wasn’t obvious, but it was far simpler than anything else I’d tried and it works properly. The key to it is realising that when one clicks on a column header, a sort is applied to the data source and – this is the non obvious bit – that sort is used to determine where the sort arrow appears and whether its an up-pointing or down-pointing arrow. So the solution to having a datagrid start up in a sorted state is to apply a sort to the datagrid’s data source at start up. Told you it wasn’t obvious!

Consider therefore the new version of the code. The key part is the contents of start(), which is responsible for initialising the datagrid with a sort.

This results in the following SWF:

Applying a Compare Function to an Auto-Sort Datagrid
There is one final problem with initialising a datagrid in a sorted state and that is when columns have their own custom compare functions. When the titlebar is clicked, the custom function is applied to the sort. When we initialise the datagrid in a sorted state, we are supplying it with a presorted data source with a Sort object attached. Therefore the custom function is not applied. All is not lost though, as the function cane be manually attached to the Sort object. The following code demonstrates this with a function that sorts first the colour number, then the name for the red green and blue fields.

And the two-column sorting behaviour can be observed in the resultant SWF below:

And there you have it. Sorting a datagrid at start up may not be intuitive, but it’s fairly straighforward once you know how.

2 thoughts on “Flex developer tip: initialising a datagrid with a sorted column

  1. Feels a bit like moving your cars wheels to get the steering wheel in the right position.

  2. Great article, thanks for sharing- Flex is a mysterious beast. It’s awesome, but half-baked… wander into any of the base classes (ListBase, TileBase) and you’ll find it littered with “todo” comments from the Adobe team. And then you look at *NEW* Spark components and see they all tie back to mx.core.UIComponent and the head-scratching begins.

    Really hoping the Apache community gets it back on track, its an excellent framework it just needs a lil more bake time.

Comments are closed.