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.