DataGrid columns from data

[Kwooda]

I posted this under the FlexBuilder topic then realized it is more appropriate
here.

I noticed in the database sample program, the results of the SQL queries
populated the data grid based on the columns available in the tables. How can
I dynamically create datagrid columns based on the supplied data?

[ntsiii]

Ok, even though you didn't state the Flex version, I'll respond anyway, but
please, in the future state the version in the subject.

Here is a sample app that dynamically creates datagrid columns based on xml
data. It is self contained, with the sample xml declared in line, but a real
app would load the column definitions from an external source.

Let us know if you have any questions.

Tracy


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
initialize="initApp()">
<mx:Script><![CDATA[
var _xmlColumnDef:XML;

var _aDP:Array;

private function initApp():Void
{
var sXML:String = "";
//hardcoded/simulate column def could be external xml
sXML += "<columndefs>";
sXML += '<columndef columnName="col1" headerText="Column One" width="100"
/>';
sXML += '<columndef columnName="col2" headerText="Column Two" width="200">';
sXML += "</columndefs>";

//simulate a dataprovider
_aDP = new Array({col1:"row 1 col 1", col2:"row 1 col 2"},{col1:"row 2 col
1", col2:"row 2 col 2"});
buildDataGridColumns(sXML);
}

private function buildDataGridColumns(sXML:String):Void
{
var sColumnName:String;
var sHeaderText:String;
//var sWidth:String;
var xmlColDef:XML = mx.utils.XMLUtil.createXML(sXML);
var aColDefNodes:Array = xmlColDef.firstChild.childNodes;
var nodeColDef:XMLNode;
for ( var i:Number=0; i<aColDefNodes.length; i++ ) {
nodeColDef = aColDefNodes[i]; //get the current node
sColumnName = nodeColDef.attributes.columnName; //get the properties
sHeaderText = nodeColDef.attributes.headerText;
//sWidth = nodeColDef.attributes.width;
var dgcNew = new mx.controls.gridclasses.DataGridColumn(); //now create the
column
dgDynamic.addColumn(dgcNew); //add the column to the dg
dgcNew.columnName = sColumnName; //set the properties
dgcNew.headerText = sHeaderText;
//dgcNew.width = sWidth; //THIS DOES NOT WORK AND BREAKS THE FUNCTION
}//for ( var i:Number=0;....
onResultSimulated({result: _aDP}) //simulate calling the result handler
}

private function onResultSimulated(oEvent:Object):Void
{
dgDynamic.dataProvider = oEvent.result
}
]]></mx:Script>

<mx:DataGrid id="dgDynamic" />

</mx:Application>

[ntsiii]

My example is 1.5, but it might still be useful.
Tracy

[Kwooda]

Thanks, Tracy, though the object hierarchy seems to have significantly changed.
I can't find anything comparable to the addColumn() method, but at least I
have a structure to guide me. I'll keep at it.