Here is a sample that demonstrates what to do if you have an itemRenderer that has scrollbars and the outer control has drag and drop enabled. If you just try and scroll the scrollbar of the itemRenderer, the dragging mouse movement activates the drag functionality. That’s not what you want! You want to be able to drag the scroll thumb to scroll the inner renderer.

The sample shows how to use stopImmediatePropagation() to halt the dragging and allow the scrolling:

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:

Here is the app code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[

   import mx.collections.ArrayCollection;
   import mx.controls.scrollClasses.ScrollThumb;
   
   private var catalog:ArrayCollection;

   [Bindable]
   public var under50:Array = ["assets/putty.jpg", "assets/cantena.jpg"];
   
   [Bindable]
   public var between50100:Array = ["assets/orb.jpg", "assets/globe.jpg", "assets/usbfan.jpg"];
   [Bindable]
   public var over100:Array = ["assets/hotsauce.jpg"];
        
    private var products:Array =
    [
    { price: "under $50", items: under50},
    { price: "$50 - $100", items: between50100},
    { price: "over $100", items: over100}
    ];

    private function initCatalog(cat:Array):void
    {
    catalog = new ArrayCollection(cat);
    myDatagrid.dataProvider = catalog;
    }
   
    private function labelFunc(item:Object, item2:Object) : String
    {
    if(item.cdata)
        return "yes";
    else {
        return "no";
    }
    }
   
    public function onMouseDown(event:Event):void{
        var foo:String = "bar"; 
        if (event.target as ScrollThumb){
            event.stopImmediatePropagation();
        }   
    }
   
   
]]>
</mx:Script>
<mx:DataGrid id="myDatagrid" creationComplete="initCatalog(products)"
    variableRowHeight="true" width="300" height="300" dragEnabled="true" dragMoveEnabled="true">
   <mx:columns>
       <mx:DataGridColumn dataField="price" />
       <mx:DataGridColumn dataField="items" labelFunction="labelFunc" >
         <mx:itemRenderer>
         <mx:Component>
                 <mx:List height="120" rowHeight="40" dataProvider="{data.items}" mouseDown="outerDocument.onMouseDown(event)">
                     <mx:itemRenderer>
                         <mx:Component>
                             <mx:Image />
                         </mx:Component>
                    </mx:itemRenderer>
                 </mx:List>
             </mx:Component>
         </mx:itemRenderer>
      </mx:DataGridColumn>
   </mx:columns>
</mx:DataGrid>

</mx:Application>