Tag: datagrid

In addition to searching, two common features implemented in DataGrids are import/export and copy/paste. There are a number of great solutions already out there. The purpose of this post is to show how we can bring them together (along with some additional code/tweaks) to provide the user with a DataGrid which plays nicely with their favorite spreadsheet application.

• Demo
• Download

Overview of demo

• There are three ways to copy the selected items from the left DataGrid: using the “Copy” button, pressing Ctrl+C or right clicking and then selecting “Copy Item(s)”.
• The copied data is stored in tab separated format, when pasting it into a spreadsheet it will retain its column structure.
• To paste data into the right DataGrid give it the focus by clicking on it and then press Ctrl+V.
• Click “Import” to upload either a CSV (comma sperated) or TSV (tab separated) file.
• Click “Export” to generate a CSV file of the data in the DataGrid.

Import/Export

In Flex 3, in order to upload a file you need a small script on the server (in Flex 4/Flash 10 the client is able to handle this locally). Included in the source you’ll find two PHP files: csvImport.php and csvExport.php. To support exporting the data from the DataGrid I’m leveraging a nice algorithm written by Sasa Radovanovic explained in this post.

This solution is meant to work with plain text csv and tsv files, if you need to support Excel (.xls) files I’d recommend checking out as3xls.

Copy/Paste

One of the limitations of the Flash Player is that (for security reasons) we’re unable to access data from the user’s clipboard. This makes pasting rather tricky. Manish Jethani has documented a clever solution in this post where he uses a hidden text field to allow the user to paste data into a DataGrid.

Field Mapper

This component provides the user with a way to map the columns in the data to the properties of the objects. It will attempt to determine if the first row of the data looks like it should be a header row and will then try to automatically map the fields.

Hope you find this useful,
Hillel

In the application I’m working on there’s a datagrid which when the user selects a row we update the info on the side page. The catch was we also enabled editing in the datagrid. It was strange to click the row to see the details on the side and then immediately be in edit mode.

Initially we required that the user double-click a field to edit it. The solution was based on the comment provided by Jana in this post.

The concern was that a user may not realize that you needed to double-click to edit the field. In the code provided below the user can select a row by clicking it. If they then click a field in the selected row it will switch in to edit mode.

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.controls.listClasses.IListItemRenderer;
			import mx.events.ListEvent;
			
			private var _selectedRow:int = -1;
			private var _clickCount:uint;
			
			override protected function mouseUpHandler( event:MouseEvent ):void 
			{
				editable = (_clickCount == 2);
				
				super.mouseUpHandler( event );													
			}
			
			override protected function selectItem( item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean=true ):Boolean
			{
				var returnValue:Boolean = super.selectItem( item, shiftKey, ctrlKey, transition );
				
				if (selectedIndex == _selectedRow)
				{
					_clickCount = 2;
				}
				else
				{
					_selectedRow = selectedIndex;
					_clickCount = 1;
				}
				
				return returnValue;			
			}
			
		&#93;&#93;>
	</mx:Script>

</mx:DataGrid>

Hope you find this helpful,
Hillel