Here is a sample of a Checkbox inside a datagrid component in flash.
Drag a datagrid component to the stage.
Give it an instance name of my_dg.
Drag a Combo Box component into the stage.
Give it an instance name of my_cb.
Drag a CheckBox Component into the stage. And delete it. The purpose of this is to add it into the library. We will use it later.
Go to the Library panel and locate the HeaderSortArrow_ascIcon. Duplicate it, and rename it with HiddenHeaderSortArrow_ascIcon. After that, edit the link property and export it to actionscript. Do not make any changes when the text boxes are enabled. Just click OK.
Change the graphic color alpha of HiddenHeaderSortArrow_ascIcon into 0. Note: not the movieclip, but the internal graphic is what I mean.
Create a new Actionscript Class and save it as ArrowAscRenderer in the directory where your .fla document is saved.
With the file open write the following lines of code.
package {
import fl.controls.dataGridClasses.HeaderRenderer;
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
public class ArrowAscRenderer extends HeaderRenderer {
public function ArrowAscRenderer() {
super();
setStyle('icon', HeaderSortArrow_ascIcon);
setStyle('upIcon', HeaderSortArrow_ascIcon);
setStyle('overIcon', HeaderSortArrow_ascIcon);
setStyle('selectedUpIcon', HeaderSortArrow_ascIcon);
setStyle('downIcon', HeaderSortArrow_ascIcon);
setStyle('overIcon', HeaderSortArrow_ascIcon);
setStyle('selectedDownIcon', HeaderSortArrow_ascIcon);
}
}
}
Create a new Actionscript Class and save it as ArrowDescRenderer in the directory where your .fla document is saved.
With the file open write the following lines of code.
package {
import fl.controls.dataGridClasses.HeaderRenderer;
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
public class ArrowDescRenderer extends HeaderRenderer {
public function ArrowAscRenderer() {
super();
setStyle('icon', HeaderSortArrow_descIcon);
setStyle('upIcon', HeaderSortArrow_descIcon);
setStyle('overIcon', HeaderSortArrow_descIcon);
setStyle('selectedUpIcon', HeaderSortArrow_descIcon);
setStyle('downIcon', HeaderSortArrow_descIcon);
setStyle('overIcon', HeaderSortArrow_descIcon);
setStyle('selectedDownIcon', HeaderSortArrow_descIcon);
}
}
}
Create a new Actionscript Class and save it as HiddenArrowRenderer in the directory where your .fla document is saved.
With the file open write the following lines of code.
package {
import fl.controls.dataGridClasses.HeaderRenderer;
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
public class ArrowDescRenderer extends HeaderRenderer {
public function ArrowAscRenderer() {
super();
setStyle('icon', HiddenHeaderSortArrow_ascIcon);
setStyle('upIcon', HiddenHeaderSortArrow_ascIcon);
setStyle('overIcon', HiddenHeaderSortArrow_ascIcon);
setStyle('selectedUpIcon', HiddenHeaderSortArrow_ascIcon);
setStyle('downIcon', HiddenHeaderSortArrow_ascIcon);
setStyle('overIcon', HiddenHeaderSortArrow_ascIcon);
setStyle('selectedDownIcon', HiddenHeaderSortArrow_ascIcon);
}
}
}
Create a new Actionscript Class and save it as CheckBoxHeaderRenderer in the directory where your .fla document is saved.
With the file open write the following lines of code.
package
{
import fl.controls.CheckBox;
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.controls.dataGridClasses.HeaderRenderer;
import flash.events.MouseEvent;
/**
* ...
* @author lexlab
*/
public class CheckBoxHeaderRenderer extends HeaderRenderer
{
public function CheckBoxHeaderRenderer()
{
super();
addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(evt:MouseEvent):void {
var dg:DataGrid = parent.parent as DataGrid;
var col:DataGridColumn = dg.getColumnAt(0);
var m:MainSort = dg.parent as MainSort;
col.sortable = false;
if (!m.isSelectAll) {
for (var i:uint = 0; i < dg.length; i++ ) {
m.selectedItems.push(dg.getItemAt(i));
}
m.isSelectAll = true;
}
else {
m.selectedItems = new Array();
m.isSelectAll = false;
}
dg.selectedItems = m.selectedItems;
}
override protected function drawIcon():void {
setStyle('upIcon', CheckBox_upIcon);
setStyle('downIcon', CheckBox_downIcon);
setStyle('overIcon', CheckBox_overIcon);
setStyle('selectedUpIcon', CheckBox_selectedUpIcon);
setStyle('selectedDownIcon', CheckBox_selectedDownIcon);
setStyle('selectedOverIcon', CheckBox_selectedOverIcon);
super.drawIcon();
}
}
}
Create a new Actionscript Class and save it as CheckBoxCellRenderer in the directory where your .fla document is saved.
With the file open write the following lines of code.
package
{
import fl.controls.listClasses.CellRenderer;
import flash.events.MouseEvent;
/**
* ...
* @author lexlab
*/
public class CheckBoxCellRenderer extends CellRenderer
{
public function CheckBoxCellRenderer()
{
super();
addEventListener(MouseEvent.CLICK, clickHandler);
}
private function clickHandler(evt:MouseEvent):void {
evt.ctrlKey = true;
evt.shiftKey = false;
}
override protected function drawBackground():void {
if (data.fname != '') {
setStyle('upIcon', CheckBox_upIcon);
setStyle('downIcon', CheckBox_downIcon);
setStyle('overIcon', CheckBox_overIcon);
setStyle('selectedUpIcon', CheckBox_selectedUpIcon);
setStyle('selectedDownIcon', CheckBox_selectedDownIcon);
setStyle('selectedOverIcon', CheckBox_selectedOverIcon);
mouseEnabled = true;
}
else {
setStyle('upIcon', CheckBox_disabledIcon);
setStyle('downIcon', CheckBox_disabledIcon);
setStyle('overIcon', CheckBox_disabledIcon);
setStyle('selectedUpIcon', CheckBox_disabledIcon);
setStyle('selectedDownIcon', CheckBox_disabledIcon);
setStyle('selectedOverIcon', CheckBox_disabledIcon);
mouseEnabled = false;
}
super.drawBackground();
}
}
}
Create another Actionscript Class file and save it as Main in the same directory as your .fla document.
With the Main.as file is opened, write the following codes.
package {
import fl.controls.DataGrid;
import fl.controls.ComboBox;
import fl.controls.dataGridClasses.HeaderRenderer;
import fl.events.DataGridEvent;
import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;
import flash.display.MovieClip;
import flash.events.Event;
public class MainSort extends MovieClip {
private var dg:DataGrid;
private var cb:ComboBox;
private var dgColChk:DataGridColumn;
private var dgColid:DataGridColumn;
private var dgColfn:DataGridColumn;
private var dgColmn:DataGridColumn;
private var dgColln:DataGridColumn;
public var selectedItems:Array;
public var isSelectAll:Boolean;
public function MainSort() {
selectedItems = new Array();
isSelectAll = false;
dg = my_dg;
cb = my_cb;
dg.allowMultipleSelection = true;
cb.addItem( { label:'Group 1', data:'0' } );
cb.addItem( { label:'Group 2', data:'1' } );
cb.addItem( { label:'Group 3', data:'2' } );
dgColChk = new DataGridColumn('');
dgColid = new DataGridColumn('No');
dgColfn = new DataGridColumn('Firstname');
dgColmn = new DataGridColumn('Middlename');
dgColln = new DataGridColumn('Lastname');
dgColChk.width = 26;
dgColChk.resizable = false;
dgColChk.headerRenderer = CheckBoxHeaderRenderer;
dgColid.headerRenderer = MyDGHeader;
dgColChk.cellRenderer = CheckBoxCellRenderer;
dgColid.sortOptions = Array.NUMERIC;
dg.addColumn(dgColChk);
dg.addColumn(dgColid);
dg.addColumn(dgColfn);
dg.addColumn(dgColmn);
dg.addColumn(dgColln);
dgColChk.headerText = '';
dgColChk.dataField = 'chk';
dgColid.dataField = 'no';
dgColfn.dataField = 'fname';
dgColmn.dataField = 'mname';
dgColln.dataField = 'lname';
dg.addItem( { chk:null, no:'2', fname:'lexter', mname:'rama', lname:'labra' } );
dg.addItem( { chk:null, no:'4', fname:'bonnin', mname:'wafu', lname:'gimenez' } );
dg.addItem( { chk:null, no:'1', fname:'john', mname:'php', lname:'baguio' } );
dg.addItem( { chk:null, no:'5', fname:'july', mname:'travian', lname:'tapangan' } );
dg.addItem( { chk:null, no:'3', fname:'raymond', mname:'choi', lname:'marquez' } );
dg.sortItemsOn('no');
cb.addEventListener(Event.CHANGE, ch);
dg.addEventListener(DataGridEvent.HEADER_RELEASE, hr);
}
private function ch(evt:Event):void {
dg.sortItemsOn('no');
for (var i:uint = 0; i < dg.columns.length; i++ ) {
var col:DataGridColumn = dg.getColumnAt(i) as DataGridColumn;
if (col.headerRenderer != CheckBoxHeaderRenderer) {
col.headerRenderer = col.headerText.toLowerCase() != 'no' ? MyDGHeaderNoArrow : MyDGHeader ;
}
}
selectedItems = new Array();
isSelectAll = false;
dg.selectedItems = selectedItems;
}
private function hr(evt:DataGridEvent):void {
for (var i:uint = 0; i < dg.columns.length; i++ ) {
var col:DataGridColumn = dg.getColumnAt(i) as DataGridColumn;
if (col.headerRenderer != CheckBoxHeaderRenderer) {
col.headerRenderer = i == evt.columnIndex ? (col.sortDescending ? MyDGHeader2 : MyDGHeader) : MyDGHeaderNoArrow ;
}
}
}
}
}
Go back to your .fla document and enter the Main in the Document Class text box.
Export the movie and see the sort arrow shown directly without any clicks on the datagrid header.
You can modify the codes that fits your requirements.
Hope this helps you.
That’s it!!!