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>