9 Replies Latest reply on May 16, 2007 11:03 PM by Benoitp

    Datagrid Itemrenderer scrolling problem

    Keytree
      Hi,

      I have a datagrid bound to an ArrayCollection. For one column I have a custom item renderer - which is a textbox.
      It works OK except when you scroll the rows and values get jumbled up randomly.

      I'd be grateful if anyone has any ideas.

      Thanks,
      dan
        • 1. Re: Datagrid Itemrenderer scrolling problem
          peterent Level 2
          itemRenderers are re-used. Only a handful of itemRenderers are created. If you have 100 records in your data, but the DataGrid is showing only 10 rows, then only 10 itemRenderers are created. As you scroll the itemRenderers are shuffled about and re-used. For example, if you scroll up 1 row, the itemRenderer for the 1st row is moved to the bottom and the itemRenderers for rows 2-10 are moved up. That's so they don't have to be redrawn. The 1st row itemRenderer is then reset - its data property is given the value for the 11th row.

          If you itemRenderer is just a text box, then you should be able to do:

          <mx:Text text="{data. field}" ... /> and have the text box populated with whatever is in the field property for the row.
          • 2. Datagrid Itemrenderer scrolling problem
            Keytree Level 1
            Peter,

            Many thanks for the response. Unfortunately I cannot get this to work properly and I don't think I can be alone.
            Looking at the example in the Flex developer guide (see below) the problem is the same here as well - when I put enough rows in the array to require scrolling, the values entered in the custom item renderer are randomly jumbled when I scroll.

            This is causing me a major problem at the moment!

            Flex item renderer example
            • 3. Re: Datagrid Itemrenderer scrolling problem
              rkschulz Level 1
              I struggled with this problem for a while as well, but re-read Peter's reply and it's exactly what happens - there is not a renderer per row in the dataprovider, but a renderer for each visible row (or thereabouts).

              This means they get reused, so you can keep any state in the renderer objects across a renderer use. I suggest you
              stick a static var in the renderer, increase it in the constructor and then put debug statements in the constructor and each of the methods that you overwrote to see which instance is used, in which order the methods are called and what's
              going on. Based on your description there is state hanging around in the renderer that make the renderer on re-use look like some other row (the one it was used for before).

              R.
              • 4. Re: Datagrid Itemrenderer scrolling problem
                Keytree Level 1
                Thanks very muh R.
                I understand what is happning however I don't see how this can't be a bug. I simply cannot get it to work - be it with the Flex developer examples or my own rendererers. Can you try the example I highlighted form the Flex developer guide with enough array entries to scroll? It seems to me that there is a fundamental problem here.

                Flex item renderer developer example
                • 5. Re: Datagrid Itemrenderer scrolling problem
                  Keytree Level 1
                  OK I finally got it to work - so thanks for pointing me in the right direction.

                  Effectively you need to override the get data method and return a data object that you have kept in line with changes, e.g.:
                  var retObj:Object;

                  in set data(value:Object):
                  retObj = value

                  then when the text input text is changed set the relevant property of retObj

                  and override the get data :
                  override public function get data():Object{
                  return retData;
                  }
                  • 6. Re: Datagrid Itemrenderer scrolling problem
                    romanczar Level 1
                    quote:

                    Originally posted by: rkschulz
                    I struggled with this problem for a while as well, but re-read Peter's reply and it's exactly what happens - there is not a renderer per row in the dataprovider, but a renderer for each visible row (or thereabouts).

                    This means they get reused, so you can keep any state in the renderer objects across a renderer use. I suggest you
                    stick a static var in the renderer, increase it in the constructor and then put debug statements in the constructor and each of the methods that you overwrote to see which instance is used, in which order the methods are called and what's
                    going on. Based on your description there is state hanging around in the renderer that make the renderer on re-use look like some other row (the one it was used for before).

                    R.



                    Could you provide an example, please? I hardly understand what you are writing about :-) Sorry.

                    • 7. Re: Datagrid Itemrenderer scrolling problem
                      Benoitp
                      Hi Keytree,

                      Many thanks for the explanation.

                      However i still can't get it to work.

                      Please find the codes below and please check and advise if i've missed something.

                      thx and regards

                      Benoit

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center">
                      <mx:Script>
                      <![CDATA[

                      import mx.controls.Alert;

                      // Define a property for returning the new value to the cell.
                      public var result:String="";

                      [Bindable]
                      private var dp: Array = [
                      {label:"None",data:1},
                      {label:"Amt", data:2},
                      {label:"%", data:3}
                      ];

                      public var retObj:Object;
                      public static var test:Number=0;

                      // Override the set method for the data property.
                      override public function set data(value:Object):void
                      {
                      test++;
                      retObj=value;
                      //Alert.show(new String(test));
                      super.data = value;


                      if (value != null)
                      {
                      var currentValue:String = value.size;
                      var len:int = dp.length;
                      for (var i:int = 0; i < len; i++)
                      {
                      if (dp .data == currentValue)
                      {
                      editor.selectedIndex = i;
                      break;
                      }
                      }
                      }


                      }

                      override public function get data():Object
                      {
                      return retObj;
                      }

                      public function onChange():void
                      {
                      //what need to be set here??
                      }
                      ]]>
                      </mx:Script>
                      <mx:ComboBox id="editor" dataProvider="{dp}" width="130" change="onChange()"/>
                      </mx:VBox>
                      • 8. Re: Datagrid Itemrenderer scrolling problem
                        romanczar Level 1
                        quote:

                        Originally posted by: rkschulz
                        I struggled with this problem for a while as well, but re-read Peter's reply and it's exactly what happens - there is not a renderer per row in the dataprovider, but a renderer for each visible row (or thereabouts).

                        This means they get reused, so you can keep any state in the renderer objects across a renderer use. I suggest you
                        stick a static var in the renderer, increase it in the constructor and then put debug statements in the constructor and each of the methods that you overwrote to see which instance is used, in which order the methods are called and what's
                        going on. Based on your description there is state hanging around in the renderer that make the renderer on re-use look like some other row (the one it was used for before).

                        R.


                        Do you think you could provide a simple example (e.g. a TextRenderer) which includes your "static var" solution? I don't exactly understand where to put it and how...
                        • 9. Re: Datagrid Itemrenderer scrolling problem
                          Benoitp Level 1
                          Hi R,
                          While searching on the net i have found this link: http://www.meutzner.com/blog/index.cfm/2006/6/22/ComoboBox-RendererEditor-for-20.

                          It explains clearly how to use item renderers and provide a very nice example.

                          Hope this helps you out.

                          regards

                          Benoit