Removing the sort arrow skin from an MX DataGrid control in Flex

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.

[GoogleAdsWide]

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>

5 thoughts on “Removing the sort arrow skin from an MX DataGrid control in Flex

    1. @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=false if you want to disable sorting altogether.

      Thanks,
      Peter

  1. Hey Peter, How to do same for Advance datagrid ? . I don’t see any method as “sortArrowSkin” .

  2. Hi Peter,
    Like Rishi, I’d like to know how to do the same on AdvancedDataGrid. Using sortExpertMode = “true” removes everything(separator, number and icon) but they reappear when you sort a column. I found a sortItemRenderer on the web which will remove the number but the arrow and the space previously occupied by the number are still there. I still need to keep the sorting facility but remove the sorting arrow and the number.

Comments are closed.