Issues with Dynamic datagrid that has itemRenderer
 

Hi,

I am in a real dilemma. I'll be so thankful, if someone can look into this issue and provide me some help.

I need to fetch my DB tables and show it on a page. Since the tables are so dynamic, my columns differ.
Also, on Flex Page > data grid, in the beginning of each row, I need to show a check box, which allows me to select and unselect a row item.

Here is my XML
[CODE]
<?xml version="1.0"?>
-<root>-<result>
-<row><eSelect>FALSE</eSelect><TC_ID>204</TC_ID><TP_ID>1</TP_ID><SKU>LSID3409</SKU><Smoke>0</Smoke><Sanity>0</Sanity><Active>1</Active><Rerun>3</Rerun><DTSID>0</DTSID><UUID>TBD</UUID><ActivationTypeID>9</ActivationTypeID></row>-
<row><eSelect>..............................................................
[CODE]

In the above XML you can see the tag 'eSelect' is the tag I added for this tag to handle checkbox on the Flex Data grid.

Here is my Flex Code:


[CODE]
//Server Response Handler (Result Handler Function):
private function onResults(event:ResultEvent) : void {
var xml:XML = new XML(event.result.toString());
var column:DataGridColumn = new DataGridColumn();
actTCList = new XMLList(xml.result.row);

var colarr:Array = TCDataGrid.columns;
for (var i:int = 1; i < actTCList[0].children().length(); i++) {
column.dataField = actTCList[0].children()[i].name();
column.showDataTips = true;
column.dataTipField = actTCList[0].children()[i].name();
colarr.push(column);
}

TCDataGrid.columns = colarr;
}


//Component Definition
<s:BorderContainer>
<mx:DataGrid id="TCDataGrid" fontWeight="normal" bottom="2" left="5" right="5" top="105" wordWrap="true" variableRowHeight="true" editable="true" dataProvider="{actTCList}">
<mx:columns>
<mx:DataGridColumn headerText="" width="15" dataField="eSelect" sortable="false" editable="false">
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function select_changeHandler(event:Event):void
{
// TODO Auto-generated method stub
if (select.selected) {
outerDocument.TCDataGrid.selectedItem.eSelect = 'true';
}
else {
outerDocument.TCDataGrid.selectedItem.eSelect = 'false';
}
}
]]>
</fx:Script>
<s:CheckBox id="select" change="select_changeHandler(event)" selected="{data.eSelect == 'true'}"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<fx:Component>
<mx:VBox>
<fx:Script>
<![CDATA[
protected function selectAll_changeHandler(event:Event):void
{
// TODO Auto-generated method stub
var i:int;
if (selectAll.selected) {
for(i = 0; i < outerDocument.actTCList.length(); i++) {
outerDocument.actTCList[i].eSelect = 'true';
}
}
else {
for(i = 0; i < outerDocument.actTCList.length(); i++) {
outerDocument.actTCList[i].eSelect = 'false';
}
}
}
]]>
</fx:Script>
<s:CheckBox id="selectAll" change="selectAll_changeHandler(event)"/>
</mx:VBox>
</fx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</s:BorderContainer>
[CODE]

But, this doesn't work. When I run the web application, I see two columns. First column contain the checkboxes. Inside the second column, I see another set of columns(columns inside columns) and the header name of the second column is the name of the last tag in the XML (ActivationTypeID).

I couldn't find any suffiecient help on this. Can you please help me?

Thanks,
Sinil

Can someone please help?