[AS3] List with Checkbox ItemRenderer

[RR_QQ]

Here is the way to create a List with checkboxes in its rows entire in AS3 WITHOUT using MXML:

the List instantiation and itemrenderer setting:

var newList1:List = new List();
newList1.id = "newList1";
newList1.dataProvider = phpData;
newList1.allowMultipleSelection = true;
newList1.width = 200;
newList1.height = 400;
newList1.x = 10;
newList1.y = 20;
newList1.itemRenderer = new ClassFactory(CheckBoxRenderer);
newList1.setStyle("alternatingItemColors", new Array("#EEEEEE", "white"));
myCanvas.addChild(newList1);


the ItemRenderer object code:


// CheckBoxRenderer.as
package FormComponents
{
import mx.controls.CheckBox;
import flash.events.Event;

public class CheckBoxRenderer extends CheckBox
{
public function CheckBoxRenderer(){
super();

// => Add listener to detect change in selected
this.addEventListener(Event.CHANGE, onChangeHandler);
}

// Override the set method for the data property.
override public function set data(value:Object):void {
super.data = value;

// => Make sure there is data
if (value != null) {
// => Set the label
this.label = value.label;

// => Set the selected property
this.selected = value.isSelected;
}

// => Invalidate display list,
// => If checkbox is now selected, we need to redraw
super.invalidateDisplayList();
}

// => Handle selection change
private function onChangeHandler(event:Event):void
{
super.data.isSelected = !super.data.isSelected;
}
}
}


I had a hell of time trying to find out how to do it so hopefully this will save others a lot of time searching

[pisco]

Hi, sounds like all are having a hard time customizing components, and i'm no exception, i have a similar problem, but my problem is with datagrid

how can i adapt that class to work with the Cellrenderer of a datagrid ?

here is where i'm at

thnx in advance,

CheckBoxCell.as


package {
// Import the required component classes.
import fl.controls.CheckBox;
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;

public class CheckBoxCell extends CellRenderer implements ICellRenderer {
var chk:CheckBox = new CheckBox();
/*
* Constructor.
*/
public function CheckBoxCell():void {

}
override protected function drawLayout():void {
this.addChild(chk);
chk.label = data.endhour;
super.drawLayout();
}
}
}


Fla



import fl.controls.DataGrid;
import fl.controls.dataGridClasses.*;

var dg_Schedules:DataGrid = new DataGrid();
dg_Schedules.sortableColumns = false
dg_Schedules.setSize(1024,500);
dg_Schedules.move(0,200);
dg_Schedules.resizableColumns = false
dg_Schedules.rowHeight = 50

var weekday:DataGridColumn = new DataGridColumn("weekday");
var starthour:DataGridColumn = new DataGridColumn("starthour");
var endhour:DataGridColumn = new DataGridColumn("endhour");
endhour.cellRenderer = CheckBoxCell

dg_Schedules.addColumn(weekday);
dg_Schedules.addColumn(starthour);
dg_Schedules.addColumn(endhour);

dg_Schedules.addItem({weekday:"Name 1", starthour:"Value 1", endhour:"OEHEHEHE",data:"http://www.helpexamples.com/flash/images/image3.jpg"});
dg_Schedules.addItem({weekday:"Name 2", starthour:"Value 2", endhour:"OEHEHEHE",data:"http://www.helpexamples.com/flash/images/image3.jpg"});
dg_Schedules.addItem({weekday:"Name 3", starthour:"Value 3", endhour:"OEHEHEHE",data:"http://www.helpexamples.com/flash/images/image3.jpg"});

addChild(dg_Schedules);


dont take into notice the data field (with the link) i was using that with a UiLoader to load those pics (its one of adobe's example in the dev help)

the issue is , the checkbox doenst show, but it's label shows , wich i think is pretty weird.


Any help would be a blast :cool: