Runtime CheckBox in Datagrid

DataGridMCSSExample.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.controls.DataGrid;
import flash.utils.getDefinitionByName;

private var o:DataGrid = null;
private var mcssDataGridComponent:MCSSDataGridComponent;

private function init():void
{
var urlRequest:URLRequest = new URLRequest("template.xml");
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
urlLoader.load(urlRequest);
}

private function onXMLLoadComplete(e:Event):void
{
var dataXML:XML = XML(e.currentTarget.data);
this.parseXML(dataXML.children(),this);
}

private function parseXML(data:XMLList, parent:*):void
{
var iCount:int = 0;
var iCountLen:int = data.length();
for(iCount = 0; iCount < iCountLen; ++iCount)
{
var classRef:String = data[iCount].@classRef;
var oClass:Class = getDefinitionByName(classRef) as Class;
var child:ICustomComponent = new oClass();
child.parseXML(data.children());
parent.addChild(child);
}
}

]]>
</mx:Script>
<!--local:MCSSDataGridComponent dataProvider="{dgArrayCollection}" />-->
</mx:Application>





CustomCheckboxItemRenderer.as


package
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.events.ListEvent;


public class CustomCheckboxItemRenderer extends CheckBox 
{
private var value:XML;
override public function set data(value:Object):void
    {
    this.value = XML(value);
    var passedData:String = value[DataGridListData(listData).dataField];
    this.selected = (passedData.toLowerCase() == "true")?true:false;
   
}  

override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);
this.value[DataGridListData(listData).dataField] = this.selected;
this.listData.owner.dispatchEvent(new ListEvent(ListEvent.CHANGE));
}

}
}







ICustomComponent.as


package
{
import mx.collections.ArrayCollection;

public interface ICustomComponent
{
function parseXML(data:XMLList):void;
}
}









MCSSDataGridComponent.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%" implements="ICustomComponent">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import flash.utils.getDefinitionByName;
import mx.collections.ArrayCollection;
import mx.controls.Label;
import mx.controls.RadioButton;


private var o:Label = null;
private var c:CustomCheckboxItemRenderer = null;
private var r:RadioButton = null
private var arrColumns:Array = new Array();

[Bindable]
private var dataProvider:XMLList;

public function setDataProvider(dataProvider:XML):void
{
this.dataProvider = dataProvider.children();
}

public function parseXML(data:XMLList):void
{
var iCount:int = 0;
var iCountLen:int = data.length();
var id:String = "";
for(iCount = 0; iCount < iCountLen; ++iCount)
{
id = data[iCount].@id;
if(id == "dataProvider")
{
setDataProvider(XML(data[iCount]));
}
else
{
var itemRenderer:String = data[iCount].@itemRenderer;

var fieldName:String = data[iCount].@id;
var headerText:String = fieldName.charAt(0).toUpperCase() + fieldName.substr(1);

var headerText:String = headerText;//data[iCount].@id;
var dataField:String = data[iCount].@id;
var dataGridColumn:DataGridColumn = new DataGridColumn();
var oClass:Class = getDefinitionByName(itemRenderer) as Class;
dataGridColumn.itemRenderer = new ClassFactory(oClass); 
dataGridColumn.headerText = headerText;
dataGridColumn.dataField = dataField;

var customLabelFunction:Function = this["covertColumnDataTo"+String(data[iCount].@type)] as Function;
dataGridColumn.labelFunction = customLabelFunction;
arrColumns.push(dataGridColumn);
}
}
}

private function covertColumnDataToString(item:Object, column:DataGridColumn):String
{
var value:String = XML(item)[column.dataField].toString();
       return value;
} 

private function covertColumnDataToBoolean(item:Object, column:DataGridColumn):String
{
var value:String = XML(item)[column.dataField].toString();
       return value;
} 

private function onCreationCompleteHandler():void
{
myDataGrid.columns = arrColumns;
myDataGrid.dataProvider = this.dataProvider;
}

private function onChangeHandler():void
{
trace("onChangeHandler"+dataProvider.toXMLString())
}

]]>
</mx:Script>
<mx:DataGrid id="myDataGrid" creationComplete="onCreationCompleteHandler()" change="onChangeHandler()">  
</mx:DataGrid>
</mx:Canvas>









template.xml


<data>
<component id="myDataGrid" classRef="MCSSDataGridComponent">
<component id="question" itemRenderer="mx.controls.Label" type="String" dataField="question" classRef="mx.controls.Label"/>
<component id="option1" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option1" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="option2" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option2" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="option3" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option3" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="option4" itemRenderer="CustomCheckboxItemRenderer" type="Boolean" dataField="option4" classRef="mx.controls.dataGridClasses.DataGridColumn"/>
<component id="dataProvider">
<node id="question1">
<question>Question 1</question>
<option1>true</option1>
<option2>true</option2>
<option3>true</option3>
<option4>true</option4>
</node>
<node id="question2">
<question>Question 2</question>
<option1>false</option1>
<option2>true</option2>
<option3>true</option3>
<option4>true</option4>

</node>
</component>
</component>
</data>