Home Tutorial Flex Flex4 Components Copying and Moving data using drag and drop

 
 

Share on Google+Share on Google+
Copying and Moving data using drag and drop
Posted on: July 13, 2010 at 12:00 AM
Advertisement
You can drag and drop the data from list to dataGrid using different data formats in this example.

Copying and Moving data using drag and drop:

You can drag and drop the data from list to dataGrid using different data formats in this example. When you move data and add it to the drop target it will be removed from draginitiator and show in drop target. When you copy data and add it to the drop target it will not be removed from draginitiator and it will be shown in the drop target. We use the dragDrop event for the drop target to add the data and dragComplete event for the drag initiator for remove data.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600"

creationComplete="gridinitialize()">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.DragEvent;

import mx.managers.DragManager;

import mx.core.DragSource;

import mx.collections.IList;

private function gridinitialize():void {

dataList.dataProvider =new ArrayCollection([

{label:"Bikrant", DOB:"01/01/1986",

City:"Delhi", State:"NewDelhi"},

{label:"Brijesh", DOB:"15/07/1984",

City:"Noida", State:"Uttar Pradesh"},

{label:"Ravi", DOB:"27/06/1989",

City:"Mumbai", State:"Maharashtra"},

{label:"Avanish", DOB:"11/01/1985",

City:"Kanpur", State:"Uttar Pradesh"},

{label:"Satya", DOB:"25/10/1989",

City:"CHandigarh", State:"Punjab"},

{label:"Samar", DOB:"27/05/1987",

City:"Gurgoan", State:"Hariyana"}

]);

studentData.dataProvider = new ArrayCollection([]);

}

private function dragDropHandler(event:DragEvent):void {

if (event.dragSource.hasFormat("itemsByIndex"))

{

event.preventDefault();

event.currentTarget.hideDropFeedback(event);

var dropTarget:DataGrid =

DataGrid(event.currentTarget);

var itemsVector:Vector.<Object> =

event.dragSource.dataForFormat('itemsByIndex') as Vector.<Object>;

var tempItem:Object =

{ label: itemsVector[0].label,

DOB: itemsVector[0].DOB,

City: itemsVector[0].City,

State: itemsVector[0].State

};

var dropLoc:int = dropTarget.calculateDropIndex(event);

IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);

if (event.ctrlKey) {

DragManager.showFeedback(DragManager.COPY);

return;

}

else {

DragManager.showFeedback(DragManager.MOVE);

return;

}

}

DragManager.showFeedback(DragManager.NONE);

}

]]>

</fx:Script>

<s:Panel title="Copying and Moveing data using drag and drop"

chromeColor="#555555"

color="#CCCCCC" width="564"

height="259">

<mx:ApplicationControlBar horizontalAlign="center"

width="562">

<s:Label text="Drag and drop data from List to datagrid"

color="#000000"

fontFamily="Verdana"/>

</mx:ApplicationControlBar>

<s:List id="dataList"

dragEnabled="true"

dragMoveEnabled="true"

color="#000000"

height="120"

contentBackgroundColor="#FFFBCF" x="12" y="37"/>

<mx:DataGrid id="studentData"

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true"

color="#000000"

x="135" y="37"

width="417"

dragDrop="dragDropHandler(event);">

<mx:columns>

<mx:DataGridColumn dataField="label"/>

<mx:DataGridColumn dataField="DOB"/>

<mx:DataGridColumn dataField="City"/>

<mx:DataGridColumn dataField="State"/>

</mx:columns>

</mx:DataGrid>

<s:Button id="btnreset"

label="Reset"

x="13" y="193"

click="gridinitialize()"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisement

Related Tags for Copying and Moving data using drag and drop:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 13, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com