How to set advanced data grid column from a xternal xml? - actionscript-3

Question

I have a xml file
<Column id="first name" headerLabel="first name" dataField="first name" />
<Column id="regionName" headerLabel="Region" dataField="region_name" />"
<Column id="lastname" headerLabel="last_name" dataField="last_name"/>
I want this column name to be assigned to my data grid as i am succesfull in picking up data from a back end and save in a variable now i just want to display it in my advanced data grid can any body guide me how to do that with a written example?
<mx:AdvancedDataGrid
id="list"
dataProvider="{data}"
columns = ?/>
I am using this code supoose my xml file name is in assets/config/rumpy.xml from which i want to retrieve column name using header field.

Answer 1

I would suggest you to convert this XML to a XMLList and add columns to the data grid while iterating through its elements.
By default you should determine an empty set of data grid columns. In my example if you don't do it, you will get two times more columns, because the grid can define columns automatically according to the data provider's structure.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
import mx.events.FlexEvent;
private var columnList:XMLList;
[Bindable]private var data:ArrayCollection = new ArrayCollection([
{first_name:"John", last_name:"Busch", region_name:"CA"},
{first_name:"Mike", last_name:"Harris", region_name:"DC"},
{first_name:"Linda", last_name:"Brucks", region_name:"CA"}]);
protected function init(event:FlexEvent):void
{
loadXML();
}
private function loadXML():void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onXMLComplete);
loader.load(new URLRequest("assets/config/rumpy.xml"));
}
private function onXMLComplete(evt:Event):void
{
var xmlData:XML = XML((evt.currentTarget as URLLoader).data);
columnList = xmlData.Column;
var cols:Array = list.columns;
for each (var item:XML in columnList)
{
var adgc:AdvancedDataGridColumn = new AdvancedDataGridColumn(item.#dataField);
adgc.headerText = item.#headerText;
cols.push(adgc);
}
list.columns = cols;
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="list" x="10" y="10" dataProvider="{data}" width="360" height="120">
<mx:columns/>
</mx:AdvancedDataGrid>
</s:Application>
//rumpy.xml
<Columns>
<Column id="first_name" headerText="First Name" dataField="first_name"/>
<Column id="regionName" headerText="Region" dataField="region_name"/>
<Column id="lastname" headerText="Last Name" dataField="last_name"/>
</Columns>