I've been going crazy trying to figure out how to get a series of buttons in
one column of a datagrid I am populating. I have seen in a bunch of places
that I need to use the CellRenderer API and write a few classes to get this to
work, but I am having trouble understanding the few examples I have found
regarding the cellrenderer. Currently I make an array of objects out of data I
pulled from a DB and use the setDataProvider() method to populate the DataGrid.
For one, would I have to completely rethink the way I make the data display in
the datagrid? And secondly, does anyone know where I might find some
understandable information regarding the CellRenderer? I can't seem to wrap my
head around it.

thanks,
-=Paul

This is also a good example.

If you take a look at the example 'CheckCellRender' in >> mx.controls.cells,
this gives you essentially 90% of what you need.

From the documentation, the API expects you to provide the following
functionality. The instance members have no assignment, just a declaration of
existance. Do yourself a favor, write this as an interface then implement it.
It's good practice, plus you don't end up scratching your head in what's needed
to create a different renderer.

//var owner:UIComponent; //reference to the list row
//var listOwner:UIComponent; //reference to the list
//var getDataLabel:Function; //function implemented by the list
//var getCellIndex:Function; //function implemented by the list

documentation says, that if you intend to extend UIComponent, then use size(),
otherwise (if UIObject or no extention at all) use setSize();

//function setSize(width:Number, height:Number):Void;
function size():Void;

A note about setValue, this gets called with every conceivable event event
rollovers, so implement wisely. Secondly, setting the visibility seems strange,
but lists render EVERY row regardless of whether it actually possesses data or
not.

function setValue(cellValueText:String, item:Object, sel:Boolean):Void;
function getPreferredHeight():Number;
function getPreferredWidth():Number;

I find with buttons it's fairly handy to use UIC, then implement
createChildren(), to create an instace of the component you want using
createClassObject. Add your eventListener to do they bidding and your home free.

I tried implementing the interface and am able to get something ugly and
useless to render, but at least it's a start.

The only way I can get anything to work is to set up the datagrid working with
data and then add a column at index 0, which seems to wipe out the datagrid.
Then if I set the cellRenderer of that column to be ButtonCellRenderer (the
class I just wrote), it makes buttons for each row. However, it seems to also
make copies of the original symbol when there is no more data to render, giving
the impression that there are more results than actually exist.

I really am having trouble understanding the whole creation process. Does
anyone have this book
http://search.barnesandnoble.com/booksearch/isbninquiry.asp?userid=Ql6ZISjBki&ea
n=9780321238344&displayonly=TOC#TOC ? I'm wondering if there is a reasonable
explanation in the API and/or datagrid section of that book. It's probably a
lot easier to do this than I am thinking it is...

alright, I figured out how to get the thing rendering properly by creating the
datagrid columns first, then setting the first column to use cellRenderer
ButtonCellRenderer and then setting the dataProvider for the DataGrid.

However, how can I access the data that would be going into the cell? This
isn't my final class definition, I'm still working on how to set all the proper
functions.

Here is my cellRenderer class: _______________________________________



import mx.core.UIComponent
import mx.controls.Button


class ButtonCellRenderer extends mx.core.UIComponent //implements
CellRendererInterface
{

var my_id:Array
var button : MovieClip;
var listOwner : MovieClip; // the reference we receive to the list
var owner : MovieClip; //ref to row
var getCellIndex : Function; // the function we receive from the list
var getDataLabel : Function; // the function we receive from the list

function ButtonCellRenderer()
{
}


function createChildren(Void) : Void
{
button = mx.controls.Button(createObject("Button", "button", 1));
button.addEventListener("click", this);
button.label = "text";
button.value = owner.id.getValue();
var my_id[getCellIndex()] = getDataLabel();

size();
}

// note that setSize is implemented by UIComponent and calls size(), after
setting
// __width and __height
function size(Void) : Void
{
button.setSize(75, 20);
button._x = (owner.id.__width/2)-50;
button._y = (owner.id.__height/2)-10;
}

function setValue(str:String, item:Object, sel:Boolean) : Void
{

button._visible = (item!=undefined);
button.label = "Info";

}

function getPreferredHeight(Void) : Number
{
return 25;
}

function getPreferredWidth(Void) : Number
{
return 125;
}

function click()
{
trace(my_id);
}

}

Here is what I used that is working for me, in case anyone else needs help with
a pb cellrenderer:

import mx.core.UIComponent
import mx.controls.Button


class ButtonCellRenderer extends mx.core.UIComponent implements
CellRendererInterface
{

var indexNum :Number
var button : MovieClip;
var listOwner : MovieClip; // the reference we receive to the list
var owner : MovieClip; //ref to row
var getCellIndex : Function; // the function we receive from the list
var getDataLabel : Function; // the function we receive from the list

function ButtonCellRenderer()
{
}


function createChildren(Void) : Void
{
button = mx.controls.Button(createObject("Button", "button", 1));
button.addEventListener("click", this);
button.label = "text";
button.value = owner.id.getValue();
//this.my_id[getCellIndex()] = this.listOwner.getDataLabel();
this.indexNum = getCellIndex().itemIndex

size();
}

// note that setSize is implemented by UIComponent and calls size(), after
setting
// __width and __height
function size(Void) : Void
{
button.setSize(75, 20);
button._x = (owner.id.__width/2)-50;
button._y = (owner.id.__height/2)-10;
}

function setValue(str:String, item:Object, sel:Boolean) : Void
{

button._visible = (item!=undefined);
button.label = "Item Info";
// button.label = _root.dpArray[getCellIndex().itemIndex].id;
this.indexNum = _root.dpArray[getCellIndex().itemIndex].id;

}

function getPreferredHeight(Void) : Number
{
return 20;
}

function getPreferredWidth(Void) : Number
{
return 75;
}

function click()
{
// what you want to happen when you click the
button
}
}