- Mark as New
- Follow
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
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!=''&&datafieldTxt.text!=''&&columnIndexTxt.text!=''}"/>
<mx:Button label="Remove Column" click="modifyColumns(event);"
disabledColor="0xf1aa99" enabled="{headerTxt.text!=''}"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Application>
Views
Replies
Total Likes