Datagrid selects the wrong custom cell in my datagrid...

Question

Hi everybody,

I am working on a problem since a week soon, but I still couldn't make it work as expected. I have a DataGrid which has HBox with a CheckBox an a Label as itemRenderer (see Code below). When I tap in to the Cell the standard itemEditor pops up and lets you enter the content of the label. Thats the standard behavior. I works fine except for 2 problems:

1. If I enter to much text, the horizontal srollbar pops up, and the cell is filled with that scrollbar. As you see I tried to set the horizontalScrollPolicy to off, but that doesnt work at all... I tried to do that for all the different elements, but the failure is still existent.

2. When I have filled more than one row, there is an other mistake happening. If I tap on a row, the datagrid selects the one below that row. That's only if one line is already selected. If I tap outside the datagrid and then, tap at any row the itemEditor of the right row will show up... Is there anything now wright in the setup of my set data method?

__

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();
   paint();
  }

  private function paint():void{
   percentHeight = 100;
   percentWidth = 100;
   setStyle("horizontalScrollPolicy", "off");
   super.setStyle("horizontalScrollPolicy", "off");

   correctAnswer = new CheckBox;
   correctAnswer.setStyle("horizontalScrollPolicy", "off");  
   addChild(correctAnswer);

   choiceLabel = new Label;
   choiceLabel.setStyle("horizontalScrollPolicy", "off");   
   addChild(choiceLabel);  


  }

     override public function set data(xmldata:Object):void{
      if(xmldata.name() == "BackSide"){
       var xmlText:Object = xmldata.TextElements.TextElement.(@position == position)[0];
       super.data = xmlText;
       choiceLabel.text = xmlText.toString();
       correctAnswer.selected = xmlText.@correct_answer;

      }               
 }
}

Thanks in advance! Markus

Answer 1

• I am not sure if this is the reason behind your issues, but the standard way of creating children is to override the createChildren method.

• Also, you are missing an else statement - you are not calling super.data when if condition fails. That doesn't look good either.

Try:

package components
{
 public class ChoiceRenderer extends HBox  {
  private var correctAnswer:CheckBox;
  private var choiceLabel:Label;

  public function ChoiceRenderer() {
    super();
    percentHeight = 100;
    percentWidth = 100;
    setStyle("horizontalScrollPolicy", "off");
  }
  override protected function createChildren():void {
    super.createChildren();
    correctAnswer = new CheckBox();
    addChild(correctAnswer);
    choiceLabel = new Label();
    choiceLabel.setStyle("horizontalScrollPolicy", "off");   
    addChild(choiceLabel);  
  }
  override public function set data(xmldata:Object):void {
    if(xmldata.name() == "BackSide") {
       var xmlText:Object = xmldata.TextElements.TextElement.(@position == position)[0];
       super.data = xmlText;
       choiceLabel.text = xmlText.toString();
       correctAnswer.selected = xmlText.@correct_answer;
    }
    else {
      //what if xmldata.name() is not "BackSide"?
      //you are not calling super.data in that case
    }
  }
}

Answer 2

• in order to avoid scroll bar you have to let datagrid have variable height

<mx:DataGrid id="dg"
 dataProvider="{dp}"
 variableRowHeight="true" 
 creationComplete="dg.height=dg.measureHeightOfItems(0,dp.length)+dg.headerHeight+2"/>