Very Strange behavior in custom dataGrid

Question

Hi everybody,

I have a dataGrid with a custom itemRenderer. Everytime I tab at least two times on the dataGrid, the cell below the one I taped gets selected. This doesn't happen if I uncomment the code in the method saveBackDataGridContent()!

The second problem is that if the Line is shorter than the entered text, a horizontalScrollBar will get active, although I set setStyle("horizontalScrollPolicy", "off");... (update: this issue got solved see below!)

Who can solve that one?

CustomRenderer.mxml:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="dataService.send()">
 <mx:Script>
  <![CDATA[
   import components.ChoiceRenderer;
   import mx.rpc.events.ResultEvent;
   import mx.events.DataGridEvent;

       private function resultHandler(event:ResultEvent):void {   
        var doc:XML = event.result as XML;
        testGrid.dataProvider = doc.Records.BackSide;   
       }


      private function saveBackDataGridContent(event:DataGridEvent):void{        
       testGrid.dataProvider[event.rowIndex].TextElement = event.currentTarget.itemEditorInstance.text;         
      }    

   ]]>
 </mx:Script>
 <mx:HTTPService id="dataService" result="resultHandler(event)" url = "data/example.xml" resultFormat="e4x"/>

 <mx:DataGrid id="testGrid" editable="true" itemEditEnd="saveBackDataGridContent(event)">
       <mx:columns>
         <mx:DataGridColumn itemRenderer="components.ChoiceRenderer" width="230"/>
      </mx:columns>
 </mx:DataGrid>
</mx:Application>

ChoiceRenderer.as

    package components
    {
     import mx.containers.HBox;
     import mx.controls.CheckBox;
     import mx.controls.Label;

     public class ChoiceRenderer extends HBox
     {

      private var correctAnswer:CheckBox;
      private var choiceLabel:Label;

      public function ChoiceRenderer()
      {
       super();              
       setStyle("horizontalScrollPolicy", "off");
       correctAnswer = new CheckBox;
       addChild(correctAnswer);   
       choiceLabel = new Label;
       addChild(choiceLabel);  
      }

         override public function set data(xmldata:Object):void{
          if(xmldata.name() == "BackSide"){
           super.data = xmldata.TextElement[0];
           choiceLabel.text = xmldata.TextElement[0].toString();
          }
         }
     }
    }

example.xml

<TopContainer>
 <Records>
  <BackSide>
   <TextElement>first</TextElement>             
  </BackSide>
  <BackSide>
   <TextElement>second</TextElement>            
  </BackSide>
  <BackSide>
   <TextElement>third</TextElement>             
  </BackSide>
  <BackSide>
   <TextElement>fourth</TextElement>            
  </BackSide>
  <BackSide>
   <TextElement>fifth</TextElement>            
  </BackSide>
  <BackSide>
   <TextElement>sixth</TextElement>            
  </BackSide>
 </Records>
</TopContainer>

I can't believe, that this problem is such a big of a thing, but I coudln't find any solution so far... Isn't this a standard function what I'm trying to do?

Thanks Markus

Answer 1

The question your posing is rather huge, but some pointers that may be giving you trouble.

ItemRenderers are recycled. This may be one of your problems, you need to make sure that any if statements in your itemRenderer also has an else statement (which would set it back to it's default state). This is a common pitfall when working with renderers.

this line setStyle("horizontalScrollPolicy", "off"); won't work because horizontalScrollPolicy is a property, not a style.

Fix these situations and then see where you are at.

Also read this article:

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

And this one:

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2.html

They were instrumental in helping me understand item renderers and their many quirks.