Flex 4 Datagrid overlay - datagrid

Question

I need to draw an overlay over a datagrid cell. I want the overlay to sit ontop of the underlying cell data and to display a crosshatch pattern ie: horizontal and vertical lines, like a mini-grid in the cell.
The idea of the overlay is to show that when no data has been received for a while then the data has become old or stale.
I'm pretty sure I need to do something in the updateDisplayList() of the renderer, but I haven't used the Drawing API so I am not sure how to do this.
Any help would be greatly appreaciated.
Thanks
Mark

Answer 1

So I suppose you have 2 states for the ItemRenderer, one called "new", one "old", right?
One good news: You don't need to override updateDisplayList function. Flex SDK 4+ provides you graphics utility named FXG. You can visit this link for more information: http://help.adobe.com/en_US/flex/using/WS145DAB0B-A958-423f-8A01-12B679BA0CC7.html
In your case, you can do something like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="50" height="50" click="currentState = 'old'">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="new" />
<s:State name="old" />
</s:states>
<s:BorderContainer width="50" height="50">
<s:Label text="{data.toString()}" />
</s:BorderContainer>
<s:Path data="M 0 10 L 50 10 M 0 20 L 50 20 M 0 30 L 50 30 M 0 40 L 50 40 M 10 0 L 10 50 M 20 0 L 20 50 M 30 0 L 30 50 M 40 0 L 40 50"
includeIn="old">
<s:stroke>
<s:SolidColorStroke color="black" weight="1" />
</s:stroke>
</s:Path>
</s:ItemRenderer>
Idea: Create a path (draw your grid) and put it in state "old", whenever the item change to state "old", the grid will appear.