Removing items from a Flex DataGrid control using the DragManager class

Problem

You want to remove items from a Flex DataGrid control using the drag manager.

Solution

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.

<?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>