DataGrid, red text for negative number. black for non

[springframework]

thanks to jim freer i have some code that does this for me.



//item renderer used to set the text color
internal function onRenderProductName (avEvent:Event):void {
//the text to modify
var text_label:Text = avEvent.target as Text;
text_label.setStyle( "fontWeight", "normal" );
var lvColor:uint = 0;
//test to see if the text color should be red
if( test ){
lvColor = 0xFF0000;
}
text_label.setStyle( "color", lvColor );
}







<mx:DataGridColumn
labelFunction="numberLabel"
headerText="Units"
width="100" >
<mx:itemRenderer>
<mx:Component>
<mx:Text
render="outerDocument.onRenderProductName(event)"
/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>






the problem with this way is that onRenderProductName(event:Event) gets called continously while the DataGrid is displayed.

it slows down the program too much. scrolling anything / dragging anything starts glitching out.


im hoping maybe there is a function of a renderer that can overridden that only gets called when the datagrid dataprovider changes.

[Jim Freer]

Once you try tracing some of these events, you’ll realize how much is being done and you’ll wonder how it is as fast as it is. Keeping the number of visible rows as small as possible is advised.

I see you are setting the fontweight over and over again in the render event and you don’t want to do things that don’t need to be done.

You could try extending the Text component and experimenting with overriding functions or properties. I don’t have any example with a Text component, but to give you a starting point I have extended the Button component to resize a button without having to put it into a container. I override the updateDisplayList function in this example. I have also overridden the set data property for some other purposes. I can’t say if these things will help. My guess is overriding a function is more efficient than handling an event. The conditions and frequency of these being called are different from the render event.

You have the data and the listData properties available to extract information for determining what style and properties need to be set.


package
{
import mx.controls.Button;

public class DataGridButton
extends Button
{
// ---------------------------------------------------------------------
// Private Member Variables
// ---------------------------------------------------------------------

private var mvHeightEx :Number;
private var mvWidthEx :Number;

// ---------------------------------------------------------------------
// Constructors
// ---------------------------------------------------------------------

public function DataGridButton
()
{
super();

} // Constructor

// ---------------------------------------------------------------------
// heightEx
// ---------------------------------------------------------------------

[Bindable]
public function get heightEx
()
:Number
{
return mvHeightEx;

} // get heightEx

public function set heightEx
( avHeightEx :Number )
:void
{
mvHeightEx = avHeightEx;

} // set heightEx

// ---------------------------------------------------------------------
// widthEx
// ---------------------------------------------------------------------

[Bindable]
public function get widthEx
()
:Number
{
return mvWidthEx;

} // get widthEx

public function set widthEx
( avWidthEx :Number )
:void
{
mvWidthEx = avWidthEx;

} // set widthEx

// ---------------------------------------------------------------------
// updateDisplayList
//
// Resize and centers button without having to place it in a container.
// ---------------------------------------------------------------------

override protected function updateDisplayList
( avUnscaledWidth :Number,
avUnscaledHeight :Number )
:void
{
super.updateDisplayList( avUnscaledWidth, avUnscaledHeight );

//Center button
if( mvWidthEx < width )
{
width = mvWidthEx;
x = x + ( avUnscaledWidth - width ) * .5;
} // if

height = mvHeightEx;
y = y + ( avUnscaledHeight - height ) * .5;

} // updateDisplayList

} // class DataGridButton

} // package



<mx:DataGridColumn
headerText="Delete"
textAlign="center"
sortable="false"
editable="false"
width="90"
>
<mx:itemRenderer>
<mx:Component>
<local:DataGridButton
label="Delete"
color="purple"
heightEx="15"
widthEx="70"
click="outerDocument.onClickDataGridButtonDeleteItem( event, data )"
/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>


If you find this approach works, let me know and I can show you how to do a callback function which will allow you to do the custom logic from your main class as opposed to doing it in your new extended “generic” Text component.

There are a lot of different ways of doing these things. I’m uncovering new things everyday.

Jim
http://freerpad.blogspot.com/

[springframework]

this way seems to work teh best for me




<mx:DataGridColumn
headerText="Units"
width="100" >
<mx:itemRenderer>
<mx:Component>
<mx:Text fontWeight="normal" htmlText="{outerDocument.numberLabel(data.Quantity)}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>






public function numberLabel(num:Number):String
{
if( test ){
return "<font color='#ff0000'>" + num + "</font>";
}
else{
return num;
}
}





setStyle was way to slow.




Jesse Couch (http://www.jessecouch.com)

[Jim Freer]

That's very clever. Might have use that one too.

I'm not experiencing the problem you have. Is this a large grid? Lots of visible columns/rows; large data set?

Jim
http://freerpad.blogspot.com/

[springframework]

yeah this doesn't seem to lower performance speed at all.

i have about 10-30 rows visible depending on screen size.

datagrid with at least 1000 entries, maybe upwards of 5000.

its pretty weak that 'Label' can't handle html itself.



performance is pretty good, but there is slight glitch when dragging the scroll bar quickly. this happens with default settings on a datagrid with 5000 entries so i assume i can't do much about this.




Jesse Couch Vancouver Actionscript 3.0 (http://www.jessecouch.com)