3 Replies Latest reply on Apr 24, 2009 10:43 AM by Gregory Lafrance

    create dynamic column from xml file

    aravindakumarthangaraju

      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?

       

        • 1. Re: create dynamic column from xml file
          Michael Borbor Level 4

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

           

          • 2. Re: create dynamic column from xml file
            Gregory Lafrance Level 6

            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>

            • 3. Re: create dynamic column from xml file
              Gregory Lafrance Level 6

              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>