DataGrid Custom Drag
it's simple to add drag/drop feature to DataGrid, just add dragEnabled="true", but in most cases the default drag behaviour is not what you expect 'cause it renders the whole row during dragging operation. There are different ways to change, the one i'm going to show is about extending DataGridDragProxy class, here is the summary of steps:
- create a custom component that extends DataGrid
- assign a default DataGridDragProxy via dragImage overriden method
- create a class that extends DataGridDragProxy
- override createChildren method and work within to implement your stuff
- use your custom comp and use the attribute dragProxy to point towards your DataGridDragProxy extended class
- create a custom component that extends DataGrid
- assign a default DataGridDragProxy via dragImage overriden method
- create a class that extends DataGridDragProxy
- override createChildren method and work within to implement your stuff
- use your custom comp and use the attribute dragProxy to point towards your DataGridDragProxy extended class
// custom component, say the name is: AssetDataGrid
<?xml version="1.0"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridDragProxy;
import mx.core.IUIComponent;
import prj.ui.*;
/**
* @public
* class to use as DragProxy image
*/
[Bindable]
public var dragProxy:Class = DataGridDragProxy; //set the default value to the standard DataGridDragProxy class
override protected function get dragImage():IUIComponent {
var dgdp:IUIComponent = new dragProxy();
dgdp.owner = this;
return dgdp;
}
]]>
</mx:Script>
</mx:DataGrid>
// DataGridDragProxy extended class, AssetDragProxy
package prj.ui {
import flash.display.*;
import mx.core.*;
import mx.controls.*;
import mx.controls.dataGridClasses.DataGridDragProxy;
import mx.controls.listClasses.IListItemRenderer;
import prj.ui.*;
public class AssetDragProxy extends DataGridDragProxy {
[Embed(source="/../assets/stock/layout.png")]
[Bindable]
private var LayoutIcon:Class; // custom drag icon
/**
* the constructor
*/
public function AssetDragProxy():void {
super();
}
override protected function createChildren():void {
super.createChildren();
var do2dContent:* = getChildAt(0);
while (do2dContent.numChildren)
do2dContent.removeChildAt(0); // remove all unuseful children, be aware of the mask concerns if your are going to put cumbersome stuff
var items:Array = AssetDataGrid(owner).selectedIndices;
var dg:AssetDataGrid = AssetDataGrid(owner);
// your stuff here
var item:Object = dg.dataProvider[items[0]];
var label:UITextField = new UITextField();
label.text = item.name;
label.x = 16;
var bmp:Bitmap = new LayoutIcon() as Bitmap;
do2dContent.addChild(bmp);
do2dContent.addChild(label);
x = this.mouseX - 15;
}
}
}
// demo:
// files: src
// |_ DemoApp.mxml
// |_ prj
// |_ ui
// |_ AssetDataGrid.mxml
// |_ AssetDragProxy.as
<?xml version="1.0"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ui="prj.ui.*" width="100%" height="100%">
<mx:ArrayCollection id="stubDataset">
<mx:Object name="child_play.png" width="150" height="100" size="35616" />
<mx:Object name="toy.png" width="480" height="250" size="586566" />
<mx:Object name="playground.png" width="320" height="240" size="135648" />
<mx:Object name="teacher.jpg" width="600" height="350" size="385616" />
<mx:Object name="funny_dog.jpg" width="532" height="412" size="412616" />
</mx:ArrayCollection>
<mx:Panel width="100%" height="100%" label="custom datagrid drag image">
<ui:AssetDataGrid id="dgImages"
dataProvider="{stubDataset}"
width="100%" height="100%"
dragProxy="prj.ui.AssetDragProxy"
dragEnabled="true">
<ui:columns>
<mx:DataGridColumn dataField="name" headerText="file name"/>
<mx:DataGridColumn dataField="width" headerText="width" width="40" />
<mx:DataGridColumn dataField="height" headerText="height" width="40" />
<mx:DataGridColumn dataField="size" headerText="size" width="60"/>
</ui:columns>
</ui:AssetDataGrid>
</mx:Panel>
</mx:Application>
// please note that datagrid columns inherits from the custom component, don't use mx
* inspired by: http://www.dgrigg.com/post.cfm/11/03/2006/DataGrid-Drag-Image