Friday, June 13, 2008

Copy functionality in Grid



The following example shows the customize data grid by applying a copy and paste functionality.

The idea is very simple but i think its useful, the data copied in clipboard can directly paste in excel and it will pasted in proper columns rather than in a single column, I tested this on Excel 2007.

for the complete source here

package com.ib.custom
{
import flash.events.ContextMenuEvent;
import flash.events.Event;
import flash.system.System;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;

import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.EventPriority;
import mx.events.CloseEvent;
import mx.events.ListEvent;

public class IBDataGrid extends DataGrid
{
[Bindable] public var enableCopy : Boolean = true;
// for creating conext menu item for coping functionality
private var copyContextItem:ContextMenuItem;
// for storing the header text at only once.
private var headerString : String = '';

private var dataToCopy:String = '';
public function IBDataGrid()
{
super();
}

// I am creating a copy context item and its handler in creation complete of DATAGRID if and only if enableCopy is true.
override protected function createChildren():void{
super.createChildren();
var flag:Boolean = false
if(enableCopy){
contextMenu = new ContextMenu();
createContextMenu();
addEventListener(ListEvent.ITEM_CLICK,
itemClickHandler,
false, EventPriority.DEFAULT_HANDLER);
flag = true;
}
}

private function createContextMenu():void{
copyContextItem = new ContextMenuItem("copy row/s");
copyContextItem.enabled = false;
copyContextItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,copyDataHandler);
contextMenu.customItems.push(copyContextItem);
// comment the following line if you want default items in context menu.
contextMenu.hideBuiltInItems();
}

private function copyDataHandler(event:Event):void{
dataToCopy = '';
if(selectedItems != null){
dataToCopy = getSelectedRowsData();
dataToCopy = ((headerString == '') ? getHeaderData() : headerString)+"\n" + dataToCopy;
copyContextItem.enabled = true;
System.setClipboard(dataToCopy);
}
}

private function handleAlertClose(event:CloseEvent):void{
trace("handling .. the event");
if(event.detail == 1)
{

}

}
private function getHeaderData():String{
headerString = '';
for(var j:int = 0; j<>

private function getSelectedRowsData():String{
var rowsData : String = '';
for(var i:int =0;i<>

private function itemClickHandler(event:ListEvent):void
{
copyContextItem.enabled = true;
}
}
}

- imtiyaz

2 comments:

The Light said...

Very good article, will try to use it. Does paste from excel to data grid works?

ilan said...

Thanks a lot !
We used your component with a slight modification, to allow using labelFunction to determine the string to be copied to clipboard. This way, you can "copy" item renderers.
The modification replaces using the dataField with the ItemToLabel function as follows:
In the implementation of getSelectedRowsData replace this:
selectedItems[i][(columns[j] as DataGridColumn).dataField]
With this:
DataGridColumn(columns[j]).itemToLabel(selectedItems[i])

 
Flex Developer | Designed by Techtrends | © 2007-2008 All rights reserved