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