Double-click on the actions layer and see that the first thing we do is import the classes we need as so:

import mx.controls.gridclasses.DataGridColumn;
import mx.controls.DataGrid;

Secondly, I create my dataProvider and apply it to the datagrid instance. The important thing here is the line:

dg.getColumnAt(0).cellRenderer = "buttonCell";

This tells the grid to use the buttonCell renderer for this cell.

The buttonCell refers to the clip you will find in the library named cellRenderer. Right-click on the clip to view it's linkage properties. You will notice it is set up as so:

The linkage ID refers to our cell renderer as file that we will discuss now.

Look in the download files and open buttonCell.as. This is our renderer file that handles the rendering of the button clip inside our datagrid. Again the code is well documented, but I do want to explain on key code block:

function setValue(str:String, item:Object, sel:Boolean): Void {
	// don't render cell if value is undefined
	if(item != undefined){
		// make button visible for all cells where name is not Car
		// this way you can turn renderer on and off based on data values
		myBtn._visible = (item.name !="Car");    }else{
		myBtn._visible = false;
	}
}

Let's say you only want to show a button for certain cells, this block of code demonstrates how you can dynamically render or not render the button based on the value held by a cell.

I hope that this article will enable you to create more sophisticated application as you extend the datagrd using the CellRenderer API.

Here is the working example.