Flex DataGrid an Advanced Datagrid Export to CSV and Excel

Posted: February 24th, 2010 | Author: danny | Filed under: Uncategorized | Tags: , , , , , | 2 Comments »

I wanted to easily export the contents of Flex’s datagrid and advanced datagrid. The two formats I selected are Comma Separated Values (CSV) and Tab Delimited. I found a partial answer here, but it lacked an executable and had a few small errors. For copy and pasting to work correctly with Excel the tab delimited format must be used.

Here is my implementation, as you can see it is based on the source above — but I’ve included an example and the code is ready to use.

Demo:

The demo is also available as a separate page located here: Export DataGrid To Clipboard (CSV & Tab Delimited)

Source:
The source code is available (MIT License), by right clicking on the application and selecting view source. It can also be directly downloaded from: DataGridToCSV Source Code

MIT Licensed

package 
{
	import flash.system.System;
 
	import mx.collections.ArrayCollection;
	import mx.collections.ICollectionView;
	import mx.collections.IViewCursor;
	import mx.controls.AdvancedDataGrid;
	import mx.controls.DataGrid;
 
	//based on http://coockbooks.adobe.com/post_Copying_a_datagrid_data_to_the_clipboard_for_Excel-9883.html
	public class DataGridUtil
	{					
		protected static var tabDelimiter:String = "\t";
		protected static var commaDelimiter:String = ","; 
		protected static var newLine:String = "\n";						
 
		public static function exportDGToClipboard (grid:DataGrid, csv:Boolean = true, onlySelected:Boolean = true):void
		{
			System.setClipboard(exportDGToCSV (grid, csv, onlySelected));
		}
 
		public static function exportADGToClipboard (grid:AdvancedDataGrid, csv:Boolean = true, onlySelected:Boolean = true):void
		{
			System.setClipboard(exportADGToCSV (grid, csv, onlySelected));
		}
 
		public static function exportDGToCSV (grid:DataGrid, csv:Boolean = true, onlySelected:Boolean = true):String
		{
			return exportGridToCSV (grid, csv, onlySelected);
		}				
 
		public static function exportADGToCSV (grid:AdvancedDataGrid, csv:Boolean = true, onlySelected:Boolean = true):String
		{
			return exportGridToCSV (grid, csv, onlySelected);
		}
 
		protected static function exportGridToCSV (grid:Object, csv:Boolean, onlySelected:Boolean):String
		{
			var dataSource:ICollectionView = (onlySelected ? new ArrayCollection (grid.selectedItems) : grid.dataProvider) as ICollectionView;
 
			var headers:String = "";		
			var delimiter:String = ""
 
			if (csv)	
				delimiter = commaDelimiter;
			else
			 	delimiter = tabDelimiter;
 
			//build header
			for each (var hcol:Object in grid.columns)//coltypes differe between DG & ADG
			{
				if (headers.length > 0)//avoid firstcolumn having extra delimeter
					headers += delimiter;					
 
				headers += hcol.headerText;			
			}
			headers += newLine;
 
			//populate data
			var cursor:IViewCursor = dataSource.createCursor();
			var data:String = "";
			var item:Object;
			var itemData:String;
 
			do 
			{
				item = cursor.current;
				itemData = "";
 
				for each (var col:Object in grid.columns)
				{
					if (itemData.length > 0)	//avoid firstcolumn having extra delimeter				
						itemData += delimiter;
 
					itemData += col.itemToLabel(item);					
				}
 
				data += itemData +newLine;
			}while (cursor.moveNext())
 
			return headers + data;
		} 						
	}
}

Example using the code on both the datagrid and advanced datagrid:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#7B7373, #342D2D]" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import DataGridUtil;
		]]>
	</mx:Script>
	<mx:Canvas width="700" height="470" horizontalCenter="0" verticalCenter="0">
		<mx:DataGrid id="datagrid" y="83" height="289" left="10" width="330" allowMultipleSelection="true">
			<mx:dataProvider>
				<mx:Object game="Bioshock" rating="10" />
				<mx:Object game="Fallout 1" rating="9" />
				<mx:Object game="Fallout 2" rating="10" />
				<mx:Object game="Fallout 3" rating="9" />
				<mx:Object game="Plants vs. Zombies" rating="7" />
				<mx:Object game="Tropico" rating="7" />
				<mx:Object game="Team Fortress 2" rating="9" />
				<mx:Object game="Arcanum" rating="10" />			
				<mx:Object game="Myst 4" rating="5" />			
			</mx:dataProvider>
			<mx:columns>
				<mx:DataGridColumn headerText="Game" dataField="game"/>
				<mx:DataGridColumn headerText="Rating" dataField="rating"/>
			</mx:columns>		
		</mx:DataGrid>
		<mx:AdvancedDataGrid y="83" id="advancedDataGrid" designViewDataType="flat" width="330" height="289" right="10" allowMultipleSelection="true">
			<mx:dataProvider>
				<mx:Object name="Danny" state="MA" city="Cambridge" />
				<mx:Object name="Andrew" state="MA" city="Boston" />
				<mx:Object name="Steven" state="NY" city="Buffalo" />
			</mx:dataProvider>
			<mx:columns>
				<mx:AdvancedDataGridColumn headerText="Name" dataField="name"/>
				<mx:AdvancedDataGridColumn headerText="State" dataField="state"/>
				<mx:AdvancedDataGridColumn headerText="City" dataField="city"/>
			</mx:columns>
		</mx:AdvancedDataGrid>
		<mx:Button x="10" y="380" label="Copy DataGrid To Clipboard (CSV)" click="DataGridUtil.exportDGToClipboard(datagrid, true, dgSelected.selected)"/>
		<mx:Button x="10" y="410" label="Copy DataGrid To Clipboard (TAB)" click="DataGridUtil.exportDGToClipboard(datagrid, false, dgSelected.selected)"/>
		<mx:Button x="360" y="380" label="Copy Advanced DataGrid To Clipboard (CSV)" click="DataGridUtil.exportADGToClipboard(advancedDataGrid, true, adgSelected.selected)"/>
		<mx:Button x="360" y="410" label="Copy Advanced DataGrid To Clipboard (TAB)" click="DataGridUtil.exportADGToClipboard(advancedDataGrid, false, adgSelected.selected)"/>	
		<mx:Label x="10" y="10" text="Export Data Grid To Clipboard" color="#EFEFEF" fontWeight="bold" fontSize="28"/>
		<mx:Label x="10" y="43" text="CSV &amp; Tab Delimited" fontSize="20" fontWeight="bold" color="#EFEFEF"/>
		<mx:HRule y="73" left="10" right="10"/>
		<mx:CheckBox id="dgSelected" x="10" y="438" label="Only Selected" color="#EFEFEF"/>
		<mx:CheckBox id="adgSelected" x="360" y="440" label="Only Selected" color="#EFEFEF"/>
		<mx:Label x="636" y="411" text="(Excel)" color="#D5E0D6" fontWeight="bold" fontSize="12"/>
		<mx:Label x="234" y="410" text="(Excel)" color="#D5E0D6" fontWeight="bold" fontSize="12"/>
	</mx:Canvas>
</mx:Application>