Flex Examples
In a previous example, “Changing the default sort arrow skin on a Flex DataGrid control”, we saw how you could change the sort arrow skin on a DataGrid control in Flex by setting the sortArrowSkin style.
The following example shows how you can remove the sort arrow skin from an MX DataGrid control in Flex by setting the sortArrowSkin style to the mx.skins.ProgrammaticSkin class.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/ --> <mx:Application name="DataGrid_sortArrowSkin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:DataGrid id="dGrid" sortArrowSkin="mx.skins.ProgrammaticSkin"> <mx:columns> <mx:DataGridColumn dataField="c1" /> <mx:DataGridColumn dataField="c2" /> <mx:DataGridColumn dataField="c3" /> </mx:columns> <mx:dataProvider> <mx:ArrayCollection> <mx:Object c1="row1, col1" c2="row1, col2" c3="row1, col3" /> <mx:Object c1="row2, col1" c2="row2, col2" c3="row2, col3" /> <mx:Object c1="row3, col1" c2="row3, col2" c3="row3, col3" /> <mx:Object c1="row4, col1" c2="row4, col2" c3="row4, col3" /> <mx:Object c1="row5, col1" c2="row5, col2" c3="row5, col3" /> <mx:Object c1="row6, col1" c2="row6, col2" c3="row6, col3" /> <mx:Object c1="row7, col1" c2="row7, col2" c3="row7, col3" /> <mx:Object c1="row8, col1" c2="row8, col2" c3="row8, col3" /> <mx:Object c1="row9, col1" c2="row9, col2" c3="row9, col3" /> </mx:ArrayCollection> </mx:dataProvider> </mx:DataGrid> </mx:Application>
View source is enabled in the following example.
You can also set the sortArrowSkin style in an external .CSS file or <Style/> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/ --> <mx:Application name="DataGrid_sortArrowSkin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> DataGrid { sortArrowSkin: ClassReference("mx.skins.ProgrammaticSkin"); } </mx:Style> <mx:DataGrid id="dGrid"> <mx:columns> <mx:DataGridColumn dataField="c1" /> <mx:DataGridColumn dataField="c2" /> <mx:DataGridColumn dataField="c3" /> </mx:columns> <mx:dataProvider> <mx:ArrayCollection> <mx:Object c1="row1, col1" c2="row1, col2" c3="row1, col3" /> <mx:Object c1="row2, col1" c2="row2, col2" c3="row2, col3" /> <mx:Object c1="row3, col1" c2="row3, col2" c3="row3, col3" /> <mx:Object c1="row4, col1" c2="row4, col2" c3="row4, col3" /> <mx:Object c1="row5, col1" c2="row5, col2" c3="row5, col3" /> <mx:Object c1="row6, col1" c2="row6, col2" c3="row6, col3" /> <mx:Object c1="row7, col1" c2="row7, col2" c3="row7, col3" /> <mx:Object c1="row8, col1" c2="row8, col2" c3="row8, col3" /> <mx:Object c1="row9, col1" c2="row9, col2" c3="row9, col3" /> </mx:ArrayCollection> </mx:dataProvider> </mx:DataGrid> </mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
In your examples the DataGrids are still sortable if the user knows where to click. It should be easy enough to add sortable=false to fix that however.
@Tony Fendall,
Correct, the columns are still sortable. Somebody left a comment and was asking me how to remove the sort arrows from the grid and I assumed they still wanted the sort functionality, minus the sort icon. But good tip about adding
sortable=falseif you want to disable sorting altogether.Thanks,
Peter
how to set the sort arrow visible by default to all the datagrid header
Hey Peter, How to do same for Advance datagrid ? . I don’t see any method as “sortArrowSkin” .