4 Replies Latest reply on Nov 2, 2011 3:52 AM by D Quinlan

    Vertically scrolling an AdvancedDataGrid with custom ItemRenderers results in corruption

    D Quinlan

      I've logged a jira item about this ...

      http://bugs.adobe.com/jira/browse/FLEXDMV-2667

       

      It's probably a good idea to throw it open to the forum as well to see if anyone has encountered this before.

      In short, I have an AdvancedDataGrid with custom ItemRenderers on each of the columns that are responsible for rendering the cell data. If the ADG is resized so that it's not all visible, and the scrollbar is scrolled all the way up and all the way down a couple of times, and the ADG is then resized again so that all the rows are visible, there's something very wrong with the result. Basically it looks as though extra rows are being drawn behind the existing ones, all on top of one another, resulting in a corrupted display.

       

      I've actually gotten it to reproduce itself every time, if you check out the jira item above for executable code and follow the instructions you should see it, and there's a screenshot of the result as well.

       

      As I detail in the jira commentary, it's definately something to do with the renderers. As the scroll bar is moved up and down extra renderers are consantly being created, and old ones don't seem to be GC'd at any point, and furthermore seem to be drawn onscreen even when they're not being used to explicitly draw the cells of the ADG. If this -is- the case then there's a memory leak here as well.

        • 1. Re: Vertically scrolling an AdvancedDataGrid with custom ItemRenderers results in corruption
          D Quinlan Level 1

          Throwing the code inline to make it easier to try out ...

           

          ADGItemRendererIssue.mxml:

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

                         creationPolicy="all"

                         creationComplete="init()">

              <s:layout>

                  <s:BasicLayout/>

              </s:layout>

             

              <fx:Script>

                  <![CDATA[

                      import ADGIssue.*;

                      import mx.collections.*;

                      import mx.controls.*;

                      import mx.controls.advancedDataGridClasses.*;

                      import mx.core.IFactory;

                      import mx.events.AdvancedDataGridEvent;

                      import mx.events.ListEvent;

                     

                      import spark.components.supportClasses.ItemRenderer;

                     

                      [Bindable]

                      public var expenses:ArrayCollection = new ArrayCollection([

                          {Expense:"Taxes", Amount:100, Cost:80, Discount:20},

                          {Expense:"Rent", Amount:200, Cost:90, Discount:21},

                          {Expense:"Bills", Amount:300, Cost:100, Discount:22},

                          {Expense:"Books", Amount:400, Cost:110, Discount:23},

                          {Expense:"Food", Amount:500, Cost:120, Discount:24},

                          {Expense:"Goldfish", Amount:600, Cost:130, Discount:25}

                      ]);

                     

                      public var cache:Dictionary = new Dictionary(true);

                     

                      protected function init():void

                      {

                          var grp:AdvancedDataGridColumnGroup = new AdvancedDataGridColumnGroup();

                         

                          grp.headerText = "Expenses";

                          grp.dataField = "Expense";

                         

                          grid.groupedColumns = new Array();

                          grid.groupedColumns.push(grp);

                         

                          grp = new AdvancedDataGridColumnGroup();

                          grp.headerText = "Finances";

                          grp.children = new Array();

                         

                          var col:AdvancedDataGridColumn = new AdvancedDataGridColumn();

                          col.headerText = "Amount";

                          col.dataField = "Amount";

                          col.itemRenderer = new ADGIssueItemRendererFactory("Amount");

                          grp.children.push(col);

                         

                          col = new AdvancedDataGridColumn();

                          col.headerText = "Cost";

                          col.dataField = "Cost";

                          col.itemRenderer = new ADGIssueItemRendererFactory("Cost");

                          grp.children.push(col);

                         

                          col = new AdvancedDataGridColumn();

                          col.headerText = "Discount";

                          col.dataField = "Discount";

                          col.itemRenderer = new ADGIssueItemRendererFactory("Discount");

                          grp.children.push(col);

                         

                          grid.groupedColumns.push(grp);

                          grid.dataProvider = expenses;

                       }

           

                  ]]>

              </fx:Script>

             

              <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

              </fx:Declarations>

              <mx:VDividedBox x="35" y="29" width="80%" height="600">

                  <mx:AdvancedDataGrid  height="400" id="grid" designViewDataType="flat"  width="100%"/>

                  <s:TextArea text="just some text to take up a wee bit of space" width="100%"/>

              </mx:VDividedBox>

          </s:Application>

           

          ADGIssueItemRendererFactory.as (in package ADGIssue)

           

          package ADGIssue

          {

              import flash.utils.Dictionary;

             

              import mx.core.IFactory;

                 

              public class ADGIssueItemRendererFactory implements IFactory

              {

                  private var _label:String;

                 

                  public function ADGIssueItemRendererFactory(label:String)

                  {

                      trace("Creating Factory for: "+label);

                      _label = label;

                  }

                 

                 

                  public function newInstance():*

                  {

                      return new ADGIssueItemRenderer(_label);

                  }

                 

              }

          }

           

          ADGIssueItemRenderer.as (also in package ADGIssue)

           

          package ADGIssue

          {

             

              import components.*;

             

              import mx.controls.Label;

              import mx.controls.listClasses.*;

              import mx.core.*;

              import mx.logging.ILogger;

              import mx.logging.Log;

              import mx.logging.LogEventLevel;       

             

              public class ADGIssueItemRenderer extends Label implements IDataRenderer

              {

                  private var _label:String;

                  private var countvalue = 0;

                  private static var count:int = 0;

                 

                  public function ADGIssueItemRenderer(label:String)

                  {

                      trace("Creating Renderer for: "+label+" with count: "+count);

                      _label = label;

                      this.countvalue = count;

                      count ++;

                  }

                 

                  override public function set data(rowData:Object):void

                  {

                      if (rowData)

                      {

                          this.text = countvalue+":"+rowData[_label];

                          trace("RENDERING: "+this.text);

                      }

                  }

              }

          }

             

           

          run the MXML and follow the instructions in the JIRA item ...

           

          1. resize the ADG so that not all of the ADG is visible vertically, and the verticle scrollbar is shown. In the example attached the ADG is in a split panel, so the split bar can be dragged up to conceal some of the rows and display the scrollbar.

          2.  drag the scroll thumb all the way to the top of the scrollbar, and all the way to the bottom and back to the top several times.

          3.  Resize the ADG again so that all the rows are visible.

           

          and the corruption should be clear to see. Here's a screenshot of what it looks like:

           

          http://bugs.adobe.com/jira/secure/attachment/75079/AdvancedDataGridItemRendererIssue.jpg

           

          Anyone ever seen anything similar ? And if so, any workarounds or fixes ?

          • 2. Re: Vertically scrolling an AdvancedDataGrid with custom ItemRenderers results in corruption
            D Quinlan Level 1

            This isn't a complete showstopper for us, but it's quite high on our list of priorities at the moment. Just as an aside, have others logged issues here with the Adobe issue tracker ? Is there a significant response or turnaround time ? This is something that can be reproduced quite trivially and both from a cosmetic and potentially a performance/resources perspective seems quite serious but there hasn't been a peep either here on the forum or on the jira item http://bugs.adobe.com/jira/browse/FLEXDMV-2667

             

            Thanks,

             

            D.

            • 3. Re: Vertically scrolling an AdvancedDataGrid with custom ItemRenderers results in corruption
              D Quinlan Level 1

              bumpity bumpy, just on the offchance an Adobe (or other) dev wants to comment on this, or on the jira item http://bugs.adobe.com/jira/browse/FLEXDMV-2667

              • 4. Re: Vertically scrolling an AdvancedDataGrid with custom ItemRenderers results in corruption
                D Quinlan Level 1

                Anyone any ideas ? Been looking at swapping out the Advanced data grid for the new spark grid, but there's a lot of extra functionality it seems in the ADG that would be a pain to implement on top of the spark grid ...