Wednesday, 18 August 2010

Datagrid with image and events

At my company I'm making an application that has many datagrids to manage information that comes from external XML files. Many are related to one another, and some of them are meant to choose online documents, that will be used by chosen users (also in datagrids). One of the requests was to be able to choose a document in the dataGrid and preview the document.

The first question was, what type of visual aid would there be for the user to see that "you can click here to preview the document"?

Since this is a Flash application, there was not much sense to use text aids, like a link in HTML, so I wanted to place an icon for the user to click.

The next question is: How do you place an image in a dataGrid cell?

Not a trivial one to answer, since the Adobe documentation is not very clear in some aspects, and is incomplete in most cases, and this is one of them.

You can change the cell rendering option using the cellRenderer class. But how do you do it?

After long research over the internet, most users and cases are documented in AS2 using the mx.core.UIComponent. In AS3 is the fl.core.UIComponent, but I stumbled in poor documentation.

So searching a bit further I discovered an example from Adobe itself, and it's in this webpage:

I tried to adapt this solution to my problem, and it looked promising, since it was in AS3, and it was exactly what I wanted. Guess what? No errors, but it didn't work either. I changed all variables, made the associations right, but some new classes, new MovieClips in the library... but nothing worked.

Adobe forums... nothing!

Finnaly, I found forum entry in, and the user EssencLord, presented a simple solution to overcome this problem. His solution was exactly whath I was looking for.

1. Make a separate class and give it a name that will identify it has a cell renderer class. I called it MCCellRenderer, because it will use a MovieClip with an icon inside, to be displayed in the dataGrid:

package src{

import fl.controls.listClasses.CellRenderer;
import flash.utils.getDefinitionByName;

public class MCCellRenderer extends CellRenderer {
        public function MCCellRenderer():void {

               var instance = new (getDefinitionByName("eye")); // Create Instance of "eye"
               this.addChild(instance);    // Add this instance to the CellRenderer
      = "eye";    // Name this new instance
               // Position Movie in Cell
               instance.x += 18;
               instance.y += 10;

2. Then in the main class, associate this class with the cell you want in the dataGrid:

var verCol:DataGridColumn = new DataGridColumn("Ver");
verCol.cellRenderer = MCCellRenderer;

If you want to associate a MouseEvent with that particular cell, you can do it like this:

1.Add an event listener do the datagrid:
MyDataGrid.addEventListener(MouseEvent.CLICK, onClickCell);

2. And here's and function that will detect which cell was clicked, and react accordingly:

function onClickEvent (E:Event){
// if a record is selected
if (eventGrid.selectedIndex != -1)
// Check if user clicked on the Info Icon CellRender of the selected Row
var Row = eventGrid.selectedIndex;
// get selected row
var Col = eventGrid.getColumnIndex("Ver");
// the column of cells with MCCellRenderer
if ( == eventGrid.getCellRendererAt(Row, Col))
MyFunction ();


Keep it simple