Comments on: Formatting a Flex DataGrid control using a custom item renderer

By: Anonymous

Anonymous — Tue, 31 Jan 2012 20:35:00 +0000

Thanks, man. Much appreciated.

By: Rahul

Rahul — Wed, 28 Dec 2011 13:20:21 +0000

Hi ,

I have a AdvancedDatagrid having a dataprovider. In one of the column there is a dropdownList (rendered) having a different data provider. On change of the dropdownlist i want to change the labels of one of the columns of Grid .
how can this be done ?
can you please reply ?

Thanks

By: Tahir Alvi

Tahir Alvi — Fri, 18 Nov 2011 12:07:24 +0000

perfect solution

By: Lele

Lele — Wed, 05 Jan 2011 11:31:07 +0000

Hi,
I have a problem with a data grid.
Rows in my data grid display data with line breaks so if a text content is composed by 3 lines my row height expand in order to display all content.
The problem is that the height of rows from what I see depends form the first row height but in my case sometimes first row has just one line and the third has 3 lines (but it’s formatted as the first with one line height).
Hope you understand…
Thanks.

By: Sankara narayanan

Sankara narayanan — Mon, 27 Sep 2010 18:00:27 +0000

Thanks a lot,
Helped great .
This is my Dictionary for flex.
:)
Regards,
Sankara narayanan Ekambaranathan.

By: Anonymous

Anonymous — Mon, 26 Apr 2010 10:58:42 +0000

Thanks for your example and the nice comments there.
I am facing a problem while trying to change the background. I am trying to change the background of specific cells that pass conditions. Like here I am testing if I have start Letter then I am testing if it delivered to the group leader or not by testing the dates of Start Letter and system date. Then if it is already sent to group leader, check if the group leader approved it or not. If not check the difference between the dates of the system date and the sent to group leader date. If the result is greater than 15 and less than 30, color that cell with red color. The other cells that are not used like manager will be in gray.
If you could help me with this problem.
My code is the following:

package com.aramco.easd.ats.vo
{
import flash.display.Graphics;

import mx.controls.DataGrid;
import mx.controls.Label;
import mx.controls.dataGridClasses.*;

import mx.utils.StringUtil;

[Style(name="backgroundColor", type="uint", format="Color", inherit="no")]

public class BackgroundColor extends Label
{
public var g:Graphics;
public function BackgroundColor()
{
super();
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
g = graphics;
g.clear();
var grid1:DataGrid = DataGrid(DataGridListData(listData).owner);

g = graphics;
g.clear();
unscaledWidth = this.unscaledWidth;
unscaledHeight = this.unscaledHeight;

if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data))
return;

checkStageLevel();

} // end of override function
public function checkStageLevel():void
{
var systdate:Date = new Date;

// is the letter send or not to group leader
if ((data.tmldSentDt == null || StringUtil.trim(data.tmldSentDt) == “”) && (data.taskStaDt != null || StringUtil.trim(data.taskStaDt) != “”))
{
checkDurationForStage(systdate, convertMyDate(data.taskStaDt));
}// is the letter approved by group leader or waiting him/her to approve it
if ((data.tmldApvDt == null || StringUtil.trim(data.tmldApvDt) == “”) && (data.tmldSentDt != null || StringUtil.trim(data.tmldSentDt) != “”))
{
checkDurationForStage(systdate, convertMyDate(data.tmldSentDt));
}// is the letter approved by division head or waiting him/her to approve it

if(data.ltrdesc == “Staking” || data.ltrdesc == ” Survey)
{
if ((data. mgraSentDt == data. mgraSentDt || StringUtil.trim(data.dvhwSentDt) == “”) && (data[DataGridListData(listData).dataField] == “mgraSentDt” || StringUtil.trim(data[DataGridListData(listData).dataField]) == “mgraSentDt”))
{
g.beginFill(0xA9A9A9);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
if ((data. mgraApvDt == null || StringUtil.trim(data. MgraApvDt) == “”) && (data[DataGridListData(listData).dataField] == “mgraApvDt” || StringUtil.trim(data[DataGridListData(listData).dataField]) == “mgraApvDt”))
{
g.beginFill(0xA9A9A9);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
}

public function convertMyDate(strToCheck:String):Date {
var uryear:String;
var urmonth:String;
var urday:String;
var newDate:Date;

uryear = strToCheck;
if (uryear != null)
uryear = uryear.substr(uryear.length – 4, 4);

urmonth = strToCheck;
if (urmonth != null)
urmonth = urmonth.substr(0, urmonth.indexOf(“/”));

urday = strToCheck; urday = urday.substr(0, urday.length – 5);
if (urday != null)
urday = urday.substr(3, urday.indexOf(“/”)+1);

newDate = new Date(Number(uryear),Number(urmonth)-1,Number(urday));

return(newDate);
}

public function checkDurationForStage(systdate:Date, VariableDate:Date):void
{
var ResultSysdate_VariableDate:Number = fromDates(VariableDate,systdate);

if ( 15 < ResultSysdate_VariableDate && ResultSysdate_VariableDate <= 30 && data[DataGridListData(listData).dataField] == data[DataGridListData(listData).dataField] )
{
g.beginFill(0xFF1234);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
else if ( 30 < ResultSysdate_VariableDate && ResultSysdate_VariableDate <= 50 && data[DataGridListData(listData).dataField] == data[DataGridListData(listData).dataField] )
{
g.beginFill(0xFF1111);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
}

public static function fromDates(start:Date, end:Date):Number
{
return Math.ceil((end.time – start.time)/MILLISECONDS_IN_DAY);
} // end of fromDates function

By: rt

rt — Fri, 12 Mar 2010 02:17:15 +0000

This is a good example but ItemRenderer works only with small amount of data. If you have a huge advanceddatagrid like say 50 columns and 1500 rows and you try to use an itemRenderer on it , your application will be really slow when you try to scroll horizontally or vertically. I had a similar advanced datagrid where I used itemrenderer and setStyle to show +ve numbers in blue and -ve numbers in red and it runs very slow.Let me know if you have a better solution to this problem or make it run faster. Try it when the data is getting updated every 10 seconds

By: Michael

Michael — Wed, 30 Dec 2009 18:56:48 +0000

Great example, yet again you saved the day for me.

By: sss4

sss4 — Thu, 17 Sep 2009 05:42:02 +0000

Never mind, I got it:

private function cur_labelFunc(item:Object, column:DataGridColumn):String {
                return cF.format(item[column.dataField]);
            }

See any problems with that?

Thanks again,

By: sss4

sss4 — Thu, 17 Sep 2009 04:29:40 +0000

Thanks for the awesome example, I think the fact that you’re still getting comments on a two year old post speaks to the usefulness of it.

I have multiple columns that I need to run through a label function, can you think of a quick way to make the label function re-usable?

TIA,