1 Reply Latest reply on Mar 17, 2008 11:49 AM by Jeesmon

    DataGrid with Image column rendering problem

    Level 1
      Hi,

      I'm having trouble in getting images displayed on a datagrid column. If I scroll down and then scroll up the scrollbar, the images are rendering fine. The source of the image is Bitmap which is generated at run time. Any idea how to solve this problem? Any help is greatly appreciated.

      Thanks,
      Jeesmon

      My component code is pasted below

      "Attach Code"

      <?xml version="1.0" encoding="utf-8"?>
      <mx:DataGrid xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()" dataProvider="{cardDataProvider}">
      <mx:Script>
      <![CDATA[
      import mx.core.UIComponent;
      import org.eclipse.higgins.cardselector.filters.CustomDropShadowFilter;
      import mx.collections.ArrayCollection;
      import mx.controls.Image;
      import org.eclipse.higgins.cardselector.icard.Card;

      [Bindable]
      private var cardDataProvider:ArrayCollection;

      private var _cards:Array;

      public function get cards():Object {
      return this._cards;
      }

      public function set cards(value:Object):void {
      this._cards = value as Array;
      if(this._cards != null && this._cards.length > 0) {
      buildDataProviderArray();
      }
      }

      private function buildDataProviderArray():void {
      var dataArray:ArrayCollection = new ArrayCollection();
      for(var i:int = 0; i<this._cards.length; i++) {
      var card:Card = this._cards ;
      dataArray.addItem(card);
      }

      this.cardDataProvider = dataArray;
      }

      private function init():void {
      this.styleName = "CardsBox";
      this.width = 200;
      this.rowHeight = 120;
      this.headerHeight = 0;
      this.liveScrolling = true;

      this.filters = [new CustomDropShadowFilter(0x333322, 55, 2).getInstance()];
      }
      ]]>
      </mx:Script>
      <mx:columns>
      <mx:DataGridColumn sortable="false" editable="false" resizable="false">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox width="100%" height="100%" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="0" verticalGap="0">
      <mx:Script>
      <![CDATA[
      import mx.controls.Alert;
      private function getBitmap(value:*) : DisplayObject
      {
      var result:DisplayObject;
      var loader:Loader = Loader(Image(value).getChildAt(0));
      if(loader.contentLoaderInfo.childAllowsParent)
      {
      if(loader.content is Bitmap)
      {
      var bitmap:Bitmap = Bitmap(loader.content);
      result = new Bitmap(bitmap.bitmapData,bitmap.pixelSnapping,bitmap.smoothing);
      }
      }

      return result;
      }
      ]]>
      </mx:Script>
      <mx:Image source="{getBitmap(data.getImage())}" height="80" width="120" styleName="CardsBoxImage" />
      <mx:Label text="{data.getName()}" styleName="CardsBoxLabel" width="100%" />
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>