Re: [flexcoders] mx:datagrid renderer problem

2011-10-17 Thread Alex Harui
Seems like the code got distorted when pasting.

For the renderer based on DGIR, did you set wordWrap=true on the column?

For the two buttons, I would try not overriding the data setter.


On 10/16/11 7:09 AM, Sells, Fred fred.se...@adventistcare.org wrote:






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{
  ! nbsp;   this.height=40; // note I had to 
do this to make it look right
  this.ignorePadding=tr! ue;
  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=!  span style=font-size:10.0pt;font-family:Courier 
New;color:#99;resident label=aaawidth=100% height=15  
alpha=0.5/
 mx:Button id=details label=bbb  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?
[cid:3401653123_10137632]







--
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui
inline: image.png

[flexcoders] mx:datagrid renderer problem

2011-10-16 Thread 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=aaawidth=100% height=15
alpha=0.5/

  mx:Button id=details label=bbb  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