PDA

View Full Version : [AS3] Add checkbox to datagrid using actionscript


zanshin
11-24-2009, 03:18 PM
I've created an Advanced DataGrid component that is reusable for other classes. I'm dynamically adding columns based on a case statement. How do I add a checkbox in method addDataGridExcludeColumn() .




default:
addDataGridExcludeColumn("Exclude");
addDataGridTextColumn("Name");
addDataGridTextColumn("SSN");
addDataGridCurrencyColumn("Calculation");
addDataGridCurrencyColumn("FundedAmt");
addDataGridCurrencyColumn("Due");
addDataGridCurrencyColumn("Overage");
addDataGridCurrencyColumn("Compensation");
addDataGridNumericColumn("Hours");
addDataGridTextColumn("TerminationDate");

}
}

private function addDataGridExcludeColumn(dataField:String):void
{
var adgc:AdvancedDataGridColumn = new AdvancedDataGridColumn(dataField);
checkBox = new CheckBox();
cols.push(adgc);
this.columns = cols;
}

zanshin
11-24-2009, 05:09 PM
I've created a AdvancedDataGrid component (for reuse). I'm creating columns based on an input file. How can I had a checkbox to a column in addDataGridExcludeColumn().



default:
addDataGridExcludeColumn("Exclude");
addDataGridTextColumn("Name");
addDataGridTextColumn("SSN");
addDataGridCurrencyColumn("Calculation");
addDataGridCurrencyColumn("FundedAmt");
addDataGridCurrencyColumn("Due");
addDataGridCurrencyColumn("Overage");
addDataGridCurrencyColumn("Compensation");
addDataGridNumericColumn("Hours");
addDataGridTextColumn("TerminationDate");

}
}

private function addDataGridExcludeColumn(dataField:String):void
{
var adgc:AdvancedDataGridColumn = new AdvancedDataGridColumn(dataField);
checkBox = new CheckBox();
cols.push(adgc);
this.columns = cols;
}

dropthat50footer
12-23-2009, 08:18 PM
I've been having some serious trouble getting a checkbox to work inside a datagrid if anybody has any working examples they could share. I've tried a few different methods now, including creating a cellrenderer that extends checkbox and implements ICellRenderer but nothing seems to be working. And adobe doesn't really have any documentation on the issue that I can find. I have a working AS2 version, but I need AS 3.

zanshin
12-23-2009, 08:36 PM
Here's one way. Create a drop-in item renderer.

The "data.key" is your input file and key is my data field.


<mx:AdvancedDataGridColumn dataField="key" editable="false" width="{checkboxWidth}" id="key"
headerText="Key" headerWordWrap="true" >
<mx:itemRenderer>
<mx:Component >
<mx:CheckBox textAlign="center" selected="{(data.key == 'true')?true:false}"/>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>

dropthat50footer
12-23-2009, 08:50 PM
Thanks for the response, but I forgot to mention that this is a Flash project. I'm assuming that example you provided only works for Flex, unless there's a way to do drop-in item renderers in Flash?

zanshin
12-23-2009, 09:10 PM
I'm not fluent in Flash coding, but if you can use actionscript you might try to creating the checkbox() and push it to the container. Best I could think of... sorry



private function addDataGridExcludeColumn(dataField:String):void
{
var adgc:AdvancedDataGridColumn = new AdvancedDataGridColumn(dataField);
checkBox = new CheckBox();
cols.push(adgc);
this.columns = cols;
}

caseyctg
12-28-2009, 10:08 AM
This problem took me forever to solve as well, here is my class for adding a button. You can use it for checkboxes as well. you of course wont need to import all these classes, but this was copied from another class I had.

package {

import fl.controls.Button;
import flash.display.MovieClip;
import fl.core.UIComponent;
import fl.core.InvalidationType;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ListData;
import flash.text.TextFormat;
import fl.managers.StyleManager;
import fl.events.ListEvent;
import flash.display.Sprite;
import flash.text.TextFormat;
import flash.events.*;

public class ButtonRenderer extends Button implements ICellRenderer
{
public var _listData:ListData;
public var _data:Object;
public var btn:Button;

public function ButtonRenderer()
{
super();

}

public function set listData(newListData:ListData):void {
_listData = newListData;

}

public function get listData():ListData {
return _listData;
}

public function set data(newData:Object):void {
_data = newData;
label = "View";
addEventListener(MouseEvent.CLICK, clicker)

}

public function get data():Object {
return _data;

}



function clicker(Evt:MouseEvent)
{
trace("Clicked")





}

}
}



//this would be for a datagrid column "col_btn"
col_btn.cellRenderer = ButtonRenderer;

dropthat50footer
01-06-2010, 09:36 PM
caseyctg, thanks for the code. I tried out your example, and it did point out one flaw in my code. When I was setting the cellrenderer, I was 'newing' the object first like this:

col_btn.cellRenderer = new ButtonRenderer();

when I changed it to the following, I had more luck:

col_btn.cellRenderer = ButtonRenderer

This fixed part of my problem. However, a problem still existed, and from what I can tell the problem is a big flaw in how the datagrid interacts with these cell renderers. The problem is whatever row you select, that row's checkbox will check, and as soon you select a different row, the previous row's checkbox will now uncheck and the newly selected row will check. This is happening because the datagrid is setting the 'selected' property of the cell (which is a checkbox) based on whether the row is selected. The checkbox also happens to use the selected property, but in a different way the datagrid does. 'Selected' to a checkbox represents whether the box is checked or not, not whether or not it merely has focus. So the datagrid is setting the checkbox to checked whenever the row is selected. This is obviously not what I wanted.

In the end, I had to override the set selected() function of the checkbox to be blank to prevent the datagrid from being able to mess with the checkbox's selected property. I then had to define my own click handler and set the selected property manually. Fairly simple now that it's figured out, but it sure took a lot of pain to get there.

maxglucksmann
05-13-2010, 05:11 PM
Hi,

First of all, thanks a lot to caseyctg and dropthat50footer, I've been looking for a way to do this in Adobe's documentation, trying to find the class that existed in previous versions of AS but couldn't find it.

I was able to add the checkboxes following caseyctg's example and replacing the Button component for the CheckBox, that worked great...

dropthat50footer, would you mind posting what you did to enable multiple selection of CheckBoxes? Would really appreciate it!

I used the example Adobe provides in their quick start section and added the features you guys posted... you can see it in the image.

Thanks again and wish you all the best,
Max

paolagrace
02-07-2011, 01:52 AM
Hi., im new to flash and i need to have a checkbox inside a data grid., can you please share how you did this one using your sample code perhaps.thanks a lot.