How do I add a checkbox to a cell dynamically in a DataGrid?

Report · Jun 06, 2014

I'm adding a list of files that the user has selected to a Datagrid object instance, myDataGrid. I add the columns Selected_Filename, File_Size, and Delete.

In the delete column, I want a checkbox to appear, the user selects it if they want that file deleted from the list.

Here is my code.

var myFile:FileReference = new FileReference();

var myFiles:FileReferenceList = new FileReferenceList();

var dp:DataProvider = new DataProvider();

var myFileName:String = "";

var myFileSize:Number = 0;

var myFileSizekB:String = "";

var myFileSizeTotal:Number = 0;

var myFileSizeTotalkB:Number = 0;

var selectedFileArray:Array = new Array();

myFiles.addEventListener(Event.SELECT, onFileSelected);

//Only need to do this the first time files are selected.

myDataGrid.addColumn("Selected_Filename");

myDataGrid.addColumn("File_Size");

var cbCol:DataGridColumn = new DataGridColumn("Delete");

myDataGrid.addColumn(cbCol);

myDataGrid.dataProvider = dp;

myDataGrid.width = 800;

//sets column width

myDataGrid.columns[0].width = 200;

myDataGrid.columns[1].width = 100;

addChild(myDataGrid);

BrowseButton.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);

function fl_MouseClickHandler(event:MouseEvent):void

{

myFiles.browse();

}

function checkboxHandler(event:MouseEvent):void {

dp.removeItem({Selected_Filename: myFileName, File_Size: myFileSizekB.concat(" MB"), Delete: cb});

}

var amountOfCheckboxes = 4;

for ( var i:int = 0; i < amountOfCheckboxes; i++ )

{

var cb:CheckBox = new CheckBox();

cb.name = "checkbox" + i;

cb.label = "label" + i;

addChild(cb);

}

function onFileSelected(evt:Event):void

{

selectedFileArray = myFiles.fileList;

for(var i:uint = 0; i < selectedFileArray.length; i++) {

myFile = selectedFileArray;

myFileName = myFile.name;

myFileSize = myFile.size / 1048576;

myFileSizekB = myFileSize.toFixed(2);

var cb:CheckBox = new CheckBox();

cb.name = "checkbox" + i;

addChild(cb);

dp.addItem({Selected_Filename: myFileName, File_Size: myFileSizekB.concat(" MB"), Delete: cb});

cb.addEventListener(MouseEvent.CLICK, checkboxHandler);

myFileSizeTotal = myFileSizeTotal + myFileSize;

myFileSizeTotalkB = myFileSizeTotal;

filesTotal.text = String(myFileSizeTotalkB.toFixed(2));

filesTotal.appendText(" MB");

myDataGrid.rowCount = myDataGrid.length;

}

I keep getting the following in my "Delete" column instead of a checkbox: [object Checkbox]

What am I missing? As you can see, outside of the datagrid object the checkbox renders fine. It must be something with the DataGrid or DataGridColumn object that I am missing. Any help would be great! Thanks. Katherine.

Report · Jun 07, 2014

http://www.actionscript.org/forums/showthread.php3?t=223658