Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

create dynamic column from xml file

Avatar

Level 1

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?

0 Replies

Avatar

Level 3

By dynamic DG column you mean?

Sincerely,

Michael

El 24/04/2009, a las 7:30, aravindakumarthangaraju <forums@adobe.com>

escribió:

>

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;

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=""

creationCompleteEffect ="" 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</

Avatar

Level 4

Just in case you mean adding a column to a DataGrid in ActionScript, here is your simplified code.

<?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.collections.ArrayCollection;
     
      [Bindable] public var myData:ArrayCollection;

      public function onresult():void{
        myData=ArrayCollection(srv.lastResult.Document.Record)
      }

      private function addColumn():void{
        for each(var col:DataGridColumn in HomeTeam.columns){
          if(col.headerText == "Runs"){
            return;
          }
        }
        var dgc:DataGridColumn = new DataGridColumn();
        dgc.headerText = "Runs";
        dgc.dataField = "runs";
        dgc.width = 40;
        var ac:ArrayCollection = new ArrayCollection(HomeTeam.columns);
        ac.addItemAt(dgc, 1);
        HomeTeam.columns = ac.toArray();
      }
    ]]>
  </mx:Script>
  <mx:HTTPService id="srv" url="data.xml" result="onresult()"/> 
  <mx:DataGrid id="HomeTeam" dataProvider="{myData}" width="500" height="300">
    <mx:columns>
      <mx:DataGridColumn id="Hcol1" headerText="Player" dataField="DisField" width="170"/>
      <mx:DataGridColumn id="Hcol2" headerText="Average" dataField="Value" width="170"/>
      <mx:DataGridColumn id="Hcol3" headerText="Matchs" draggable="false" dataField="Prefix" width="170"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Button label="Add Runs Column" click="addColumn();"/>
</mx:Application>

<?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>

Avatar

Level 4

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>