Flex Examples
The following example shows how you can drag an item from a Flex DataGrid control onto an Image control to remove the item from a data provider.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
private function image_dragEnter(evt:DragEvent):void {
var obj:IUIComponent = IUIComponent(evt.currentTarget);
DragManager.acceptDragDrop(obj);
}
private function image_dragDrop(evt:DragEvent):void {
var item:Object = dataGrid.selectedItem;
var idx:int = arrColl.getItemIndex(item);
arrColl.removeItemAt(idx);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object c1="r1.c1" c2="r1.c2" c3="r1.c3" c4="r1.c4"/>
<mx:Object c1="r2.c1" c2="r2.c2" c3="r2.c3" c4="r2.c4"/>
<mx:Object c1="r3.c1" c2="r3.c2" c3="r3.c3" c4="r3.c4"/>
<mx:Object c1="r4.c1" c2="r4.c2" c3="r4.c3" c4="r4.c4"/>
<mx:Object c1="r5.c1" c2="r5.c2" c3="r5.c3" c4="r5.c4"/>
<mx:Object c1="r6.c1" c2="r6.c2" c3="r6.c3" c4="r6.c4"/>
<mx:Object c1="r7.c1" c2="r7.c2" c3="r7.c3" c4="r7.c4"/>
<mx:Object c1="r8.c1" c2="r8.c2" c3="r8.c3" c4="r8.c4"/>
<mx:Object c1="r9.c1" c2="r9.c2" c3="r9.c3" c4="r9.c4"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:Panel title="Drag DataGrid item over the trash icon to remove item"
styleName="opaquePanel">
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
dragEnabled="true"
width="400"
rowCount="6"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="c1"
headerText="Column 1" />
<mx:DataGridColumn dataField="c2"
headerText="Column 2" />
<mx:DataGridColumn dataField="c3"
headerText="Column 3" />
<mx:DataGridColumn dataField="c4"
headerText="Column 4" />
</mx:columns>
</mx:DataGrid>
<mx:ControlBar horizontalAlign="right">
<mx:Image id="image"
source="@Embed('assets/iconUninstall.png')"
dragDrop="image_dragDrop(event);"
dragEnter="image_dragEnter(event);" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
I searched the internet, and also Adobe Flex Builder help pages, but couldn’t find a way to create a Grid layout container with a single button in it as an item USING ACTIONSCRIPT ONLY rather than mxml. I don’t like mxml because it gives lots of limitation when I need to create things at run time. Is there any code samples to do it?
Pete, good stuff as always. How about some AdvancedDataGrid examples? I’d like to see the proper way to setup grouping in Actionscript. What I’m doing doesn’t seem to be working:
groupingCol = new GroupingCollection();
groupingCol.source = this.returnList;
groupingCol.grouping = new Grouping();
groupingCol.grouping.fields = [new GroupingField("document_class")];
Regards,
R.
Thank you for your Source.
I’m take your source.
Thank you for your Source.
I take your source.
It not work in a module.
Is a bug?
Rubens de Souza Silva,
Check out “Workaround for error when loading PopUps from Modules” at Flex Butterflies and Bugs.
Peter
Is there any option available in FLEX3 to place the DATA GRID Columns in different pannel/canvas. I have to populate the data from a table to a grid. The data from the same table should be shown in one tab as a grid – i.e multiple rows. Once user selects a particular row from the grid, the user should be able to see more details of this record in another tab, once he selects the “Details” tab. Note: The details are also from the same table and correspond to same row.
Is there any option available in FLEX3 to place the DATA GRID Columns in different pannel or canvas.
I have requirement to populate the data from a table in a multi record control like grid.
The data from the same table should be shown in one tab as a grid – i.e multiple rows. Once user selects a particular row from the grid, the user should be able to see more details of this record in another tab, once he selects the Details tab.
Note: The details are also from the same table and correspond to same row.
Thnx for the sample.
Just one question. Is there any way in flex to select more than one item a time from the datagrid?
I am looking for a way to do something similar but instead of having one specific drop target(your trash can) I’d like to let the user drop the item anywhere other than the list to delete it.
Any ideas? I tried putting dragEnter and dragDrop events on my WindowedApplication but with no success.
Hello,
I’m trying to drag a dynamically added panel control between 3 VBox Containers.
The trick is not only dragging a panel between them but having them snap into
place due to
VBox positioning. when i add the panels they drop in, one on top of the other
but when i
drag them (within the same VBox) they no longer position themselves to the
strict vertical
layout of the container.
obviously, AS is the only way to achieve this effect…
Adobe help files show an example of dragging an icon from one Canvas to another.
However,
when i try to plug in the AS to fit my needs, it still isn’t quite right.
any tips?
Thanks,
Andre
so cool！！！！
tkx！