Flex 3: dynamically created checkbox column in datagrid - data population issues and event listener

Question

I have a datagrid control in my mxml file:

Now in my AS file, in the result function when obtaining data from DB, I can create columns dynamically. Let's say I create 1 column (client name):

private function GetDebtors_Result(event:ResultEvent):void
{
var arrayCol:Array = new Array();
var xmlSrc:XML = new XML("<main></main>");
var xmlTmp:XML;
var colClientname:DataGridColumn;

//Build an XML from DB data received (could as well use "event.result" directly to act as dataprovider for the datagrid, but I needed to break it down here)
for each(var o:Object in event.result)
{
xmlTmp = <row>
<CLIENTNAME>{o.CLIENTNAME}</CLIENTNAME>
</row>;
xmlSrc.appendChild(xmlTmp);
}

//Create the column CLIENTNAME
colClientname = new DataGridColumn("CLIENTNAME");
colClientname.headerText = "Client Name";

//Add the newly created column in the "Column" array.
arrayCol.push(colClientname);

//Use the "Column" array to set the columns of the datagrid.  
dgSearch.columns = arrayCol;

//Populate the datagrid with the XML data.
dgSearch.dataProvider = xmlSrc.row;
}

This works well.

Now comes the issue: I need to add a second column which will contain checkboxes. They will be selected or deselected depending on the data from database. I'll show how I've done it by updating the same "GetDebtors_Result" function as above (added lines are commented as "// ADDED"):

private function GetDebtors_Result(event:ResultEvent):void
{
var arrayCol:Array = new Array();
var xmlSrc:XML = new XML("<main></main>");
var xmlTmp:XML;
var colClientname:DataGridColumn;
var colSel:DataGridColumn; // **ADDED**

//Build an XML from DB data received (could as well use "event.result" directly to act as dataprovider for the datagrid, but I needed to break it down here)
for each(var o:Object in event.result)
{
xmlTmp = <row>
<CLIENTNAME>{o.CLIENTNAME}</CLIENTNAME>
<SELECTED>{(o.SELECTED == 1)?true:false}</SELECTED>  //**ADDED**
</row>;
xmlSrc.appendChild(xmlTmp);
}

//Create the column CLIENTNAME
colClientname = new DataGridColumn("CLIENTNAME");
colClientname.headerText = "Client Name";

//Create the column SELECTED
colSel = new DataGridColumn("SELECTED"); // **ADDED**
colSel.headerText = ""; // **ADDED**
colSel.itemRenderer = new ClassFactory(mx.controls.CheckBox); // **ADDED**
colSel.dataField = "SELECTED"; // **ADDED**

//Add the newly created column in the "Column" array.
arrayCol.push(colClientname);

//Add the "selection" column in the "Column" array.
arrayCol.push(colSel); // **ADDED**

//Use the "Column" array to set the columns of the datagrid.  
dgSearch.columns = arrayCol;

//Populate the datagrid with the XML data.
dgSearch.dataProvider = xmlSrc.row;

}

Problem #1: The checkbox column appears, I can check and uncheck the checkboxes, but they are not checked/unchecked respective to DB data when loaded.

Problem #2: How do I associate a function to the checkboxes, for instance one which will update the XML so that I can save the new data to the DB?

Anybody got the solution? Thank you in advance.

Why don't you want to describe all your columns in the DataGrid definition section in MXML? I would do so and then I would define some ItemRenderers to properly show your database content. Are the results always different and you have to build the DataGrid every time from scratch? If I have not understood your problem, explain it please in detail. — Anton

Adwait Deshpande Adwait Deshpande · Accepted Answer · 2014-03-18T11:18:26

Seems to be a very old question that I saw today. Hopefully you would have found out the solution by now, just in-case if anyone has same problem:

While adding a checkbox to column- just instantiate it 1st:

var chkTempCheck: Checkbox = new CheckBox();

Then set all the properties required:

chkTempCheck.selected = o.dBColumnToDecideCheckUnCheck

here 'o' is the Object you are using from event.result. This will work for sure!

Flex 3: dynamically created checkbox column in datagrid - data population issues and event listener

2 Answers