Flex Examples
The following example shows how you can set the icon color (the sort arrow color in the DataGrid header and arrows icons in the horizontal/vertical scrollbar) on a Flex DataGrid control by setting the iconColor style.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/21/setting-the-icon-color-on-the-datagrid-control-in-flex/ --> <mx:Application name="DataGrid_iconColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="iconColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:DataGrid id="dataGrid" dataProvider="{Font.enumerateFonts(true)}" iconColor="{colorPicker.selectedColor}" /> </mx:Application>
View source is enabled in the following example.
You can also set the iconColor 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/2009/07/21/setting-the-icon-color-on-the-datagrid-control-in-flex/ --> <mx:Application name="DataGrid_iconColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> DataGrid { iconColor: red; } </mx:Style> <mx:DataGrid id="dataGrid" dataProvider="{Font.enumerateFonts(true)}" /> </mx:Application>
Or, you can set the iconColor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/21/setting-the-icon-color-on-the-datagrid-control-in-flex/ --> <mx:Application name="DataGrid_iconColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ColorPickerEvent; protected function colorPicker_change(evt:ColorPickerEvent):void { dataGrid.setStyle("iconColor", evt.color); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="iconColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" change="colorPicker_change(event);"/> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:DataGrid id="dataGrid" dataProvider="{Font.enumerateFonts(true)}" /> </mx:Application>
For an example of how to do this in Flex 4, see “Setting the icon color on the Halo DataGrid control in Flex 4″.
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
Pete,
This no longer seems to work in the GM Flex 4 release :-(
I’m getting an “iconColor is only supported by mx.control.DataGrid with the theme(s) Halo’” caution in my style sheet.
And the style no longer is applied to my MX DataGrid.
What’s even more bizarre is that I seem to be able to add a Spark style property (customChrome) to my MX component to style it (which works fine), but how do I target the iconColor of a customChrome style?
I have to say, that the documentation/examples surrounding Spark (and updated MX) styles is almost non-existent.
Wheres a Spark Style Explorer?
@Matt Voerman,
I don’t think there is a Spark Style Explorer. To do a lot of the less common tweaks, you’ll need to reskin now. There aren’t as many hooks into the styles as there were for the older MX controls/containers.
But as for MX DataGrid arrow colors, I believe you can just set the
symbolColorstyle, as seen in the following example:Peter
Ah ha! Looks like I blogged this already at “Setting the icon color on the Halo DataGrid control in Flex 4″.
Peter