How can i show delete image in each row in a Data grid ?

Question

i want show a image onmouse over inside data grid to each row,so if i click on that image,some function should call(as per my requirement). how can i do this ?

<mx:DataGrid width="320" height="624" verticalScrollPolicy="on" dataProvider="{blocked_Usernames}" editable="true">
        <mx:columns>
            <mx:DataGridColumn headerText="Blocked User Name" dataField="blockedUsernames" editorDataField="value"/>
            <mx:DataGridColumn width="20" editable="false">
                <mx:itemRenderer >
                    <mx:Component >                         
                        <mx:Image source="@Embed('assets/image/Close.png')" width="10" height="10"  autoLoad="false"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>    
        </mx:columns>
    </mx:DataGrid>

Answer 1

You have to create a new MXML Component (a HBox with a Label and an Image will do the trick) and use it as an itemRenderer.

You can check this example from the Adobe website.