Create dynamic column from xml file

Question

Hi All,
       <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" backgroundColor="white" width="500" height="300" creationComplete="onload()" >
<mx:Style>
    DataGrid {
        alternatingItemColors: #a1a1a1,#8bb8e6;       
        borderColor:#050505; borderStyle:outset;        
        color:#ffffff;       
        editable:false;         
           fontSize:11; fontWeight:bold; fontFamily:Tahoma;          
           horizontalGridLines:false;
           headerStyleName:myHeaderStyles;
                headerSeparatorSkin:ClassReference("mx.skins.ProgrammaticSkin");    
    rollOverColor:#5CC2F7;    
    selectionColor:#E8C76D; sortableColumns:true;   
    textAlign:center; textRollOverColor:#FD0606; textSelectedColor:#1301FF;   
    variableRowHeight:true;
    verticalAlign:middle; verticalGridLines:false; verticalGridLineColor:#050505;   
wordWrap: false; 
.myHeaderStyles
            color: #ffffff;
            fontWeight: bold; fontFamily:Arial; fontSize:13;
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
   import mx.charts.renderers.CircleItemRenderer;
   import mx.charts.series.ColumnSeries;
   [Bindable]
    public var myData:ArrayCollection;
private var now:Date=new Date();
private var str:String;
private var st:String;
public function onload():void
str=String(now.getDate())+' '+String(now.getMonth())+' '+String(now.getFullYear())+' '+String(now.getHours())+' '+String(now.getMinutes()+' '+String(now.getSeconds()));
trace(str);
st=srv.url="Data/NumberChart.xml?rand="+str;
trace(st);
srv.send();
public function onresult():void
myData=ArrayCollection(srv.lastResult.Document.Record)
trace(myData);
]]>
</mx:Script>
<!-- xml path (data passing) -->
  <mx:HTTPService id="srv"         result="onresult()"  /> 
  <mx:WipeRight id="myWR" duration="2000"/>
    <mx:WipeLeft id="myWL" duration="2000"/>   
    <mx:HBox label="Home Team" width="100%" height="100%" backgroundColor="white">
<mx:DataGrid id="HomeTeam" dataProvider="{myData}" creationCompleteEffect ="{myWR}"   width="500" height="300"  headerBackgroundSkin="@Embed(source='assets/Tileimage4movieplayer_img.png')">
<mx:columns>
<mx:DataGridColumn id="Hcol1" headerText="Player" draggable="false" dataField="DisField" width="170" showDataTips="true" wordWrap="true"  />
<mx:DataGridColumn id="Hcol2" headerText="Average" draggable="false" dataField="Value" width="170" showDataTips="true" wordWrap="true"  />
<mx:DataGridColumn id="Hcol3" headerText="Matchs" draggable="false" dataField="Prefix" width="170" showDataTips="true" wordWrap="true"  />
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
and my xml code is...
<?xml version='1.0' encoding='utf-8' ?>
<Document Title='50 Runs Milestone'>
<Record>
<DisField>K Sangakkara</DisField>
<Value>200.00</Value>
<runs>50</runs>
<Prefix>KXIP Vs DC</Prefix>
</Record>
<Record>
<DisField>R Sharma</DisField>
<Value>185.19</Value>
<Prefix>KXIP Vs DC</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>W Jaffer</DisField>
<Value>151.52</Value>
<Prefix>BRC Vs CSK</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>G Gambhir</DisField>
<Value>135.14</Value>
<Prefix>CSK Vs DD</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>M Boucher</DisField>
<Value>125.00</Value>
<Prefix>KKR Vs BRC</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>A Gilchrist</DisField>
<Value>119.05</Value>
<Prefix>KXIP Vs DC</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>S Asnodkar</DisField>
<Value>113.64</Value>
<Prefix>RR Vs BRC</Prefix>
<runs>50</runs>
</Record>
</Document>
it's working but i want to crete dynamic datagrid column how to do it any idea?

Answer 1

I actually found this topic interesting, so I made the data and code generic and created a Flex Cookbook entry, adding the ability to remove columns as well:
<?xml version='1.0' encoding='utf-8' ?>
<Document>
  <Record>
    <name>Bob Smith</name>
    <age>48</age>
    <sales>$53,000.00</sales>
    <territory>Southeast</territory>
  </Record>
  <Record>
    <name>Susan Sharma</name>
    <age>37</age>
    <sales>$37,000.00</sales>
    <territory>Southwest</territory>
  </Record>
  <Record>
    <name>George Freebird</name>
    <age>52</age>
    <sales>$49,000.00</sales>
    <territory>Midwest</territory>
  </Record>
</Document>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  creationComplete="srv.send();" >
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;
      [Bindable] public var myData:ArrayCollection;
      public function onresult():void{
        myData=ArrayCollection(srv.lastResult.Document.Record)
      private function modifyColumns(evt:MouseEvent):void{
        var ac:ArrayCollection = new ArrayCollection(SalesData.columns);
        var actionTaken:Boolean = false;
        if(evt.currentTarget.label=="Remove Column"){
          for each(var col1:DataGridColumn in ac){
            if(col1.headerText == headerTxt.text){
              ac.removeItemAt(ac.getItemIndex(col1));
              headerTxt.text = "";
              SalesData.columns = ac.toArray();
              actionTaken = true;
          if(actionTaken){
            mx.controls.Alert.show("Column " + headerTxt.text + " was removed.");
          }else{
            mx.controls.Alert.show("Column " + headerTxt.text + " not found.");
        }else if(evt.currentTarget.label=="Add Column"){
          for each(var col:DataGridColumn in ac){
            if(col.headerText == headerTxt.text){
              mx.controls.Alert.show("Column " + headerTxt.text + " already exists.");
              return;
          var dgc:DataGridColumn = new DataGridColumn();
          dgc.headerText = headerTxt.text;
          dgc.dataField = datafieldTxt.text;
          dgc.width = 100;
          ac.addItemAt(dgc, int(columnIndexTxt.text));
          SalesData.columns = ac.toArray();
          headerTxt.text = "";
          datafieldTxt.text = "";
          columnIndexTxt.text = "";
          mx.controls.Alert.show("Column " + headerTxt.text + " was added.");
    ]]>
  </mx:Script>
  <mx:HTTPService id="srv" url="data.xml" result="onresult()"/> 
  <mx:DataGrid id="SalesData" dataProvider="{myData}" width="500" height="300">
    <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="name" width="170"/>
      <mx:DataGridColumn headerText="Sales" dataField="sales" width="170"/>
      <mx:DataGridColumn headerText="Territory" dataField="territory" width="170"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Form label="Add or Remove a Column">
    <mx:FormItem label="Enter column header text:">
      <mx:TextInput id="headerTxt"/>
    </mx:FormItem>
    <mx:FormItem label="Enter column datafield (if adding):">
      <mx:TextInput id="datafieldTxt"/>
    </mx:FormItem>
    <mx:FormItem label="Enter zero based new column index (if adding):">
      <mx:TextInput id="columnIndexTxt"/>
    </mx:FormItem>
    <mx:FormItem label="Click to add or remove column">
      <mx:HBox>
        <mx:Button label="Add Column" click="modifyColumns(event);"
          disabledColor="0xf1aa99"
          enabled="{headerTxt.text!=''&amp;&amp;datafieldTxt.text!=''&amp;&amp;columnIndexTxt.text! =''}"/>
        <mx:Button label="Remove Column" click="modifyColumns(event);"
          disabledColor="0xf1aa99" enabled="{headerTxt.text!=''}"/>
      </mx:HBox>
    </mx:FormItem>
  </mx:Form>
</mx:Application>