Problem
I would like to add icon images to the header section of a Spark DataGrid
Solution
Adding a static icon to the header of Spark DataGrid can be done very easily by creating a custom headerRenderer and specifying it for your GridColumn.
Detailed explanation
Adding a static icon to the header of Spark DataGrid is very easy. You will need to create a custom headerRenderer and specify it for your GridColumn. Here are the steps:
1. Copy the contents of the skin file: DefaultGridHeaderRenderer.mxml and paste it into a new mxml f ile that will be used as your custom headerRenderer.
2. In the custom header renderer, find the HGroup at the end of the skin file. Add a BitmapImage as the first element in the HGroup (before the 'labelDisplay' Group).
<s:BitmapImage source="beer.JPG" />
3. You might want to make some padding or gap changes to the HGroup to position your icon. This example changed the gap to 8.
4. Specify this custom headerRenderer for your GridColumn:
<s:GridColumn id="c1_2" dataField="name" headerText="Pub Name" headerRenderer="IconHeaderRenderer2"/>
Voila! It's simple. Note, if you wanted to modify the sortIndicator, you can also do it by creating a custom header renderer based off of the default one.
This recipe was taken from my blog post at http://butterfliesandbugs.wordpress.com/2011/02/16/adding-an-icon-to-the-header-for-a-spark-datagrid/ which also contains a full downloadable code sample.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
