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>