Drag and Drop icon question

I am dragging item from a datagrid and while dragging I could see all of the columns in the selected record, being getting dragged. However I only want to show one column (maybe name or id of the record)? Is there a way to achieve this? Also, could I show an icon or image instead of the record while dragging.

Thanks G开发者_StackOverflow中文版uys.

This can be done by extending the DataGrid to expose the DataGridDragProxy property. Check out http://dgrigg.com/blog/2006/11/03/datagrid-drag-image/ for a working example.

The extended DataGrid:

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

Using the DataGrid:

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