[flexcoders] mx:datagrid renderer problem

[Sells, Fred]

I'm using Flex 4 with an mx:datagrid with a value of 40 for row height
and drag and drop enabled.  I'm having a very hard time getting a custom
renderer to work.  The layout keeps getting messed up in the grid cell.
I really need to be able to diplay two lines in each cell and maybe some
color coding of certain text (requirements are evolving).  The problem
seems to be related to the custom row height.

 

The following works but does not give me two line functionality:

                ...

                                <mx:DataGridColumn
itemRenderer="renderers.AppointmentRenderer" />

------------------ the renderer code is---------(boilerplate removed fro
brevity)-------------------------------------

package renderers {

      

 

public class AppointmentRenderer extends DataGridItemRenderer{

 

      public function AppointmentRenderer()     {

            super();

      }

 

      override public function validateNow():void     {

            if (data==null || data.resident__id=="0")             {

                  background = false;

                  this.text = null;

                  this.styleName="";

                  

            }else{

                  this.height=40; // <<<<<<<<<<<<<<<<<<<<<note I had to
do this to make it look right

                  this.ignorePadding=true;

                  this.text=""+data.name;

                  this.styleName = "payor"+data.payor;

                  background = true;

 

            }

            super.validateNow();

      }

 

}

}

==============however If my renderer is like
this=========================

<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"; 

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

             xmlns:mx="library://ns.adobe.com/flex/mx"

            backgroundAlpha="1.0"  

             height="40"

            horizontalAlign="center" verticalAlign="top" verticalGap

paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">

 

      <fx:Script>

            <![CDATA[

                  import mx.core.IDataRenderer;

                  

                  [Bindable]

                  private var _data:Object;

                  override public function set data(value:Object):void{
_data=value;      }

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

 

            ]]>

      </fx:Script>

 

      

      <mx:Button id="resident" label="aaaaaaawidth="100%" height="15"
alpha="0.5"/>

      <mx:Button id="details" label="bbbbbbb"  width="100%" height="15"
alpha="0.5"  />

</mx:VBox>

 

Then I get a grid that seems has the header and the cells distorted as
shown below.  Note that each column is a different table (same
component) due to drag-n-drop issues and some other parts of the
requirements I did not get into.  Can anyone give me a clue about what
I'm doing wrong?

 

 

 

<<image001.png>>