1 Reply Latest reply on Nov 15, 2007 4:44 AM by atta707

    Custom ItemRenderer Problem


      I have a requirement to display an image in some rows in the datagrid based on a flag obtained from the database. To achieve this, I am using a custom itemrenderer for that particular column and on a simple check if the value obtained for that particular row is 1 then I show the image, else I leave it blank (i.e set the image visibility to false).

      Here is a snippet of the code:

      Custom ItemRenderer

      <mx:HBox .... creationComplete="init();">
      public function init( ):void {
      // Check if the flag is 0 or 1 to determine whether to show or hide the image
      if(data.@FLAG == 0) {
      img.visible = false;
      <mx:Image id="img" source="something.gif" />

      Main Application

      <mx:Application .........>
      <mx:DataGrid dataProvider="{myXML.item}" ... >
      <mx:DataGridColumn dataField="@FLAG" headerText="Image" itemRenderer="CustomItemRenderer" />
      ......... // Other columns

      This code seems to work to a certain level. However, here are some problems that i'm facing and would like to know if this is the right approach:

      1. The check to determine whether to show the image doesn't function well. It shows the image when the flag is 0 and sometimes doesn't show the image when the flag is 1.
      2. Upon scrolling or sorting of the datagrid the results of the column randomly get messed up losing the images for the ones it had before scrolling or sorting and sometimes placing the image in another row it does not belong to.

      Can anyone please guide me if they have worked on a similar requirement and how it can be achieved. My feeling is that I am performing the check in the wrong method. I tried doing it by overriding the set data method but that has the scroll problem and eventually makes all the images visible initially disappear after scrolling or sorting.

      Any help will be much appreciated.

      Thank you.
        • 1. Re: Custom ItemRenderer Problem
          atta707 Level 2
          Override the set data property and move the code written in init() method there:

          override public function set data(value:Object):void {
          super.data = value;
          // Check if the flag is 0 or 1 to determine whether to show or hide the image
          if(data.@FLAG == 0) {
          img.visible = false;

          once it works, and there is no reason why it shouldn't, read up more on life cycle of renderers in the docs.