Numeric Stepper in DataGrid????

[jkula]

Anybody out there have a good implementation of a numeric stepper for a datagrid? I couldn't find one, so I borrowed Macromedia's implementation of a ComboBox for the cellrenderer api and morphed it into a numeric stepper. I am able to render a numeric stepper in the cells of the grid, but it has "issues". Specifically, if my grid has only one row with data in it, the grid will render a numeric stepper in every row. What is even more weird is that when I mouse over the "dangling" numeric steppers, they disappear.

I have tried hacking the "setValue" method of the class every which way I can think of, but can't find any combination where I can set the _visible property for the null rows to "false". Nothing seems to work. What I did also realize is that "setValue" is being called many times - there appears to be something in the framework of cellrenderer that calls this method more often than one would expect.

Here's my implementation of "NumericStepperCell" - as stolen and morphed from MM:

import mx.core.UIComponent
import mx.controls.NumericStepper
import mx.controls.DataGrid

class NumericStepperCell extends UIComponent
{
private var stepper : MovieClip;
private var owner;
private var listOwner : DataGrid;
private var getCellIndex : Function;
private var getDataLabel : Function;

private static var PREFERRED_HEIGHT_OFFSET = 4
private static var PREFERRED_WIDTH = 100;
private static var STEPPER_HEIGHT = 20;
private static var STEPPER_WIDTH_OFFSET = 20;
private var startDepth:Number = 10;

public function NumericStepperCell()
{
}

//Creates a NumericStepper object and sets range / listener.
public function createChildren(Void) : Void
{
stepper = createObject("NumericStepper", "Stepper", startDepth++);
stepper.minimum = 1;
stepper.maximum = 100;
stepper.addEventListener("change", this);
}

public function size(Void) : Void
{
stepper.setSize(__width, STEPPER_HEIGHT);
stepper._y = 67;
}

public function setValue(str:String, item:Object, sel:Boolean) : Void
{
var drawStepper:Boolean = true;
if (item == undefined)
drawStepper = false;

stepper.value = item.quantity;
stepper._visible = drawStepper;
}

public function onLoad()
{
}

public function open()
{
listOwner.selectedIndex = getCellIndex().itemIndex;
}

public function change()
{
// Set the listOwner's data to the currently selected item's data of the stepper.
owner.item.quantity = stepper.value;
var index:Number = owner.item.product;
//update the sub-total if necessary
if(index > 0) //0 = "Select a product"
{
var price:Number = 0;
price = _root.product.productArray[index].Price;
//stepper guaranteed to have value > 0 due to min value set on field
var amt:String = "$" + stepper.value * price;
_root.checkout.cartTotalDisplay += stepper.value * price;
owner.item.sub_total = amt;
listOwner.dispatchEvent({ type:"cellEdit"});
}
}

public function getPreferredHeight(Void) : Number
{
return owner.__height;
}
}

Any help would be greatly appreciated!