You decide to use an AdvancedDataGrid to display your data and for one of the columns you would prefer to use an icon instead of a text label to indicate the kind of data this column represents.
First step is building the renderer. You can use either MXML or ActionScript but for this example we’ll use ActionScript.
package labs.otuome.ui.renderers { import mx.controls.Button; import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer; /** * Custom header renderer for displaying * a graphical image in the column header. * @author Hasan Otuome */ public class StatusHeaderRenderer extends AdvancedDataGridHeaderRenderer { ///////////////////////////////////////////////////////////////////////////////////////// // PRIVATE PROPERTIES ///////////////////////////////////////////////////////////////////////////////////////// private var _btn:Button; private const LEFT_PADDING:int = 12; ///////////////////////////////////////////////////////////////////////////////////////// // PUBLIC PROPERTIES ///////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////// // PUBLIC METHODS ///////////////////////////////////////////////////////////////////////////////////////// /** * Constructor */ public function StatusHeaderRenderer() { super(); } ///////////////////////////////////////////////////////////////////////////////////////// // OVERRIDES ///////////////////////////////////////////////////////////////////////////////////////// /** * Override to add the custom component. */ override protected function createChildren():void { super.createChildren(); _btn = new Button(); _btn.width = 16; _btn.height = 16; _btn.setStyle( 'skin', StatusMarkerHeaderIconSkin ); addChild( _btn ); } /** * Override to layout the children * @param unscaledWidth * @param unscaledHeight */ override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void { _btn.x = LEFT_PADDING; super.updateDisplayList( unscaledWidth, unscaledHeight ); } ///////////////////////////////////////////////////////////////////////////////////////// // PRIVATE METHODS ///////////////////////////////////////////////////////////////////////////////////////// } }
Here we’ve added a 16×16 button with a custom skin that will serve as our column header and we adjust the position of the custom skin so that it displays where we’d like it to.
Now, we can provide this class name to our AdvancedDataGridColumn that we wish to customize. We do this by assigning our custom class to the headerRenderer property of the AdvancedDataGridColumn. This property can be set via MXML or ActionScript. I’ll show an example in ActionScript as that approach is slightly more involved.
import mx.core.ClassFactory; myADGColumn.headerRenderer = new ClassFactory( StatusHeaderRenderer );
Here we’ve used ClassFactory to get an instance of our custom renderer and we’ve assigned that instance to our chosen data grid column. Now, all that’s left to do is compile our application to see the result.
