I’ve seen this question come up a few times recently in various forums/lists and even in my blog comments (see “Changing the default sort arrow skin on a Flex DataGrid control”).
The following example shows how you can display the sort arrow in a DataGrid control in Flex without having the user click on a column header in the DataGrid control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/ --> <mx:Application name="DataGrid_dataProvider_sort_fields_test"> xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.collections.Sort; import mx.collections.SortField; private function init():void { arrColl.sort = new Sort(); arrColl.sort.fields = [new SortField("idx", false, true)]; arrColl.refresh(); } ]]> </mx:Script> <mx:ArrayCollection id="arrColl"> <mx:source> <mx:Array> <mx:Object idx="1" c1="One.1" c2="One.2" /> <mx:Object idx="2" c1="Two.1" c2="Two.2" /> <mx:Object idx="3" c1="Three.1" c2="Three.2" /> <mx:Object idx="4" c1="Four.1" c2="Four.2" /> <mx:Object idx="5" c1="Five.1" c2="Five.2" /> <mx:Object idx="6" c1="Six.1" c2="Six.2" /> <mx:Object idx="7" c1="Seven.1" c2="Seven.2" /> <mx:Object idx="8" c1="Eight.1" c2="Eight.2" /> <mx:Object idx="9" c1="Nine.1" c2="Nine.2" /> <mx:Object idx="10" c1="Ten.1" c2="Ten.2" /> <mx:Object idx="11" c1="Eleven.1" c2="Eleven.2" /> <mx:Object idx="12" c1="Twelve.1" c2="Twelve.2" /> <mx:Object idx="13" c1="Thirteen.1" c2="Thirteen.2" /> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" creationComplete="init();"> <mx:columns> <mx:DataGridColumn dataField="idx" /> <mx:DataGridColumn dataField="c1" /> <mx:DataGridColumn dataField="c2" /> </mx:columns> </mx:DataGrid> </mx:Application>
View source is enabled in the following example.
A big thanks to Rob for the heads up with the solution!
For more information, see http://bugs.adobe.com/jira/browse/SDK-14663.



{ 14 comments… read them below or add one }
How do I do the first part but with a XMLList and not an array? Could you please give one example? Pretty please :)
@bsides,
How about this?
Peter
If you just want to display arrows without sorting the model, you can extend the datagrid class and add these 2 methods :
public function set sortIndex(index:uint):void { mx_internal::sortIndex = index; } // Column index
public function set sortDirection(direction:String):void { mx_internal::sortDirection = direction; } //ASC or DESC
you don’t need to refresh the dataprovider…
Hope that helps
Alex
@Alexandre Croiseaux
thanks!
i needed to invalidateDisplayList() on the grid afterwards tough
I have an interesting challenge with regard to sort arrows. I would like to not show them in order to preserve available label real estate. I have attempting this by setting sortArrowSkin to various things but with no luck. Might you be able to offer me any advise?
@Colin,
You should be able to set the sortArrowSkin to null, although it would appear that it makes the column unsortable (that may be a bug):
Peter
Or you could set the
sortArrowSkinstyle via an external .CSS file or <Style> block, as seen in the following example:Peter
And the workaround for the null sort arrow skin not performing a sort is to set the
sortArrowSkinstyle to something like ProgrammaticSkin instead:I’ll file a bug at http://bugs.adobe.com/flex/ later today and document the workaround and then post the bug number here for anybody interested.
Peter
Bug filed; http://bugs.adobe.com/jira/browse/SDK-25679
When I tested in Flex 3.5, I got a runtime error. I don’t remember seeing that at home, so I’ll double check my home config later.
Peter
This solution works perfectly. Thanks again and thank you for this blog; a fantastic resource.
Hi,
Another way to prevent the sort arrow from appearing is to override placeSortArrow to do nothing:
override protected function placeSortArrow():void{}
- Rob
@Rob,
Good tip, thanks!
Peter
We actually have a grid that solves the issue of placing the intial sort arrow as required by the original poster. This is available at http://www.flexicious.com. We also have a solution for the advanced datagrid, where you can programatically add multiple sorts and it will draw the arrows appropriately.
Very nice how this person solved it:
http://interactive-squared.co.uk/index.php/2009/10/12/programmatically-getting-datagrid-to-sort/