DataGrid Drag Image
http://www.dgrigg.com/post.cfm/11/03/2006/DataGrid-Drag-Image
One of the great features in Flex is the ability to enable drag and drop from data grids with one simple statement, dragEnabled="true". Flick the switch and away you go dragging rows here and there. But what happens when you do not want to see the entire row being dragged around. What if you want to display something more meaniful and less bulky than the entire visible row. Well if you are using the mx.controls.DataGrid you are stuck, however there is a solution. Extend the DataGrid. Here is a working sample, once it is loaded do a right click to view the source code.
By default the DataGrid's dragImage property is protected and set to 'mx.controls.dataGridClasses.DataGridDragProxy'. To enable setting a custom dragImage on the DataGrid you can simply extend it to allow the use of a use defined drag image class.
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridDragProxy;
import mx.core.IUIComponent;
/**
* @public
* class to use as DragProxy image
* set the default value to the standard DataGridDragProxy class
*/
[Bindable]
public var dragProxyImage: Class = DataGridDragProxy;
override protected function get dragImage():IUIComponent
{
var image:IUIComponent = new dragProxyImage();
image.owner = this;
return image;
}
]]>
</mx:Script>
</mx:DataGrid>
Now that the DataGrid has been extended to allow a custom drag image, let's see how to use it. The first thing to do is to create a class to use as the drag image. It's a good idea to look over the source code for the mx.controls.dataGridClasses.DataGridDragProxy class as you will be able to see how to create a DragProxy that can work with one or multiple selected rows. Next, drop the new DataGrid into your mxml file, set the dragProxyImage value and you are done.
<controls:DataGrid
dataProvider="{dataSource}"
rowHeight="40"
dragEnabled="true"
height="140"
dragProxyImage="com.dgrigg.controls.CustomDragProxy"
allowMultipleSelection="true">
<controls:columns>
<mx:DataGridColumn headerText="Image" dataField="image">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.image}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Product" dataField="name"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
</controls:columns>
</controls:DataGrid>
This same solution will work with the mx.controls.List. Click here to view a working sample. Once it is loaded do a right click to view the source code.
