Desktop

May 22nd, 2012

Enable Drag and Drop in a Adobe Flex DataGrid

More articles by »
Written by: Nouman Naveed
Tags:
drag and drop in adobe flex at Flexatom.com

Yesterday I was studying about Drag and Drop capability. Drag and Drop is not new in Flex, it was available since Flex 3. If you want to make items in a Flex DataGrid drag-and-drop enabled, so that users can drag them from one grid to another then first setting to look into is dragEnabled property of DataGrid. Set dragEnabled property set to “true” and dropEnabled property to “true” on destination DataGrid.

Enabling drag-and-drop in list-based controls such as DataGrid is very simple as setting the appropriate properties to true, because the Flex Framework takes care of all the underlying work to support dragging and dropping.

<?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” layout=”horizontal” creationComplete=”application1_creationCompleteHandler(event)”>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;

[Bindable]
private var homesForSale:ArrayCollection;

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
srv.send();
}

protected function srv_resultHandler(event:ResultEvent):void
{
// TODO Auto-generated method stub
homesForSale=event.result.data.region;
}

]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<s:HTTPService id=”srv” url=”assets/homesforsale.xml” resultFormat=”object” result=”srv_resultHandler(event)”
</fx:Declarations>

<mx:DataGrid id=”grid” width=”100%” height=”100%” sortableColumns=”false”
dragEnabled=”true” dataProvider=”{homeForSale}”>
<mx:columns>
<mx:DataGridColumn headerText=”Total No.” dataField=”total”/>
<mx:DataGridColumn headerText=”City” sortable=”false” dataField=”city”/>
<mx:DataGridColumn headerText=”State” sortable=”false” dataField=”state”/>
<mx:DataGridColumn headerText=”Country” dataField=”country”/>
</mx:columns>
</mx:DataGrid>

<mx:DataGrid width=”100%” height=”100%” dropEnabled=”true”>
<mx:columns>
<mx:DataGridColumn headerText=”Total No.” dataField=”total”/>
<mx:DataGridColumn headerText=”City” sortable=”false” dataField=”city”/>
<mx:DataGridColumn headerText=”State” sortable=”false” dataField=”state”/>
<mx:DataGridColumn headerText=”Country” dataField=”country”/>
</mx:columns>
</mx:DataGrid>
</s:Application>


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.




 
 

 
CQ5
adobe aem56 dam logo

Setting Images in DAM

All images are loaded into the DAM (Digital Assets Management). To upload an image, you’ll need to use your Activator login. From the tree, click +Digital Assets Find the way to the tree to suitable folder (AAFP, images, ANN,...
by Nouman Naveed
0

 
 
 

Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed
0

 
 
CQ5
aem 5.6.1 features pic

Many New Features in AEM 5.6.1

AEM 5.6.1 is a easy to use, unified experience management collection for marketers in the digital sphere to use in creating, managing, and delivering unique online experiences that are brand-entered and increase demand across d...
by Nouman Naveed
0

 

 
CQ5
Adobe CQ5 WEM, SOCO, Tagging, DAM

What’s New in CQ 5.6

1: It’s called AEM (Adobe Experience Manager) now Though I guess not that essential, it’s going to be exciting if the name is going to attach – there were other occasions where Adobe tried to rename this result and at the...
by Nouman Naveed
0

 
 
CQ5
content management for web and mobile

Content Management for Web & Mobile

Adobe CQ is a WCM and gives a better browser-based user interface. It is best suitable for business and IT for creating interactive, multimedia rich, multichannel consumer understanding to make an engaging digital existence, ma...
by Nouman Naveed
0

 




0 Comments


Be the first to comment!


Leave a Reply

Your email address will not be published. Required fields are marked *