All,
I am trying to apply a custom renderer to three ADG columns and am
having a challenge with it. The details are a bit difficult to explain
so bear with:
1.) I have a membership listing that is in an ADG
2.) I am generating the ADG via AS as the columns are customizable
to the users preference and on page load, their prior configuration is
obtained to determine the last layout they set their listing to. Three
of the possible columns in the report are date fields and the user has
the option to select a format they want dates displayed in (e.g.
3/20/2008 or 20 Mar 2008).
3.) Once the listing is complete, the user has the ability change
the date format via a combobox. Here is the code for that one:
[Bindable]
public var dateFormatArray:ArrayCollection;
private var dateFormatTypes:Array =
[
{label: "3/20/2008", data: "M/DD/YYYY"},
{label: "03/20/2008", data: "MM/DD/YYYY"},
{label: "3/20/08", data: "M/DD/YY"},
{label: "03/20/08", data: "MM/DD/YY"},
{label: "20 Mar 08", data: "DD MMM YY"},
{label: "20 Mar 2008", data: "DD MMM YYYY"},
{label: "20 March 08", data: "DD MMMM YY"},
{label: "20 March 2008", data: "DD MMMM YYYY"},
{label: "Mar 20, 2008", data: "MMM DD, YYYY"},
{label: "March 20, 2008", data: "MMMM DD, YYYY"},
{label: "20/3/2008", data: "DD/M/YYYY"},
{label: "20/3/08", data: "DD/M/YY"},
{label: "20.3.2008", data: "DD.M.YYYY"},
{label: "20.3.08", data: "DD.M.YY"},
{label: "2008.03.20", data: "YYYY.MM.DD"},
{label: "2008/03/20", data: "YYYY/MM/DD"},
{label: "2008 Mar 20", data: "YYYY MMM DD"}
];
dateFormatArray = new ArrayCollection(dateFormatTypes);
<mx:ComboBox fontSize="12" id="dateFormat"
editable="false" enabled="true" top="20" right="488"
dataProvider="{dateFormatArray}"
change="comboChangeHandler(event)"></mx:ComboBox>
4.) When the user selects a different data format from the
dropdown, the "comboChangeHandler(event)" is fired, which is currently
setup to go thru the 3 columns, call the custom renderer and render the
new format to the columns. This is the code for the function:
private function comboChangeHandler(event:ListEvent) : void
{
var dateRenderer:LoginDateFormatRenderer = new
LoginDateFormatRenderer();
dateRenderer.Format = dateFormat.selectedItem.data;
for (var i:int=0; i<dateColumns.length; i++)
{
var col:AdvancedDataGridColumn =
AdvancedDataGridColumn(dateColumns[i]);
col.itemRenderer = dateRenderer;
}
//ArrayCollection(memberRpt.dataProvider).refresh();
memberRpt.validateNow();
}
And this is the code for the custom renderer for one of the columns:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml";
implements="mx.core.IFactory">
<mx:Script>
<![CDATA[
public function set Format(value:String) : void
{
dateFormatter.formatString = value;
}
override public function set data(dataItem:Object) : void
{
super.data = dateFormatter.format(dataItem.LastLoginDate);
}
public function newInstance():*
{
return new LoginDateFormatRenderer();
}
]]>
</mx:Script>
<mx:DateFormatter id="dateFormatter"/>
<mx:Text htmlText="{data}" />
</mx:HBox>
Ok, now that all the details are out of the way, here is the
problem. When the dropdown is changed, the event fires normally, the
codes gets into the custom renderer and the new format is clearly passed
in (watched in debug). However, two things are occurring. 1st, the
overridden set data function never gets hit. 2nd, the new format is not
applied to the column.
Anyone have any ideas either what I am missing or if there is a
better way to do this? I've scoured the web for answers and it seems
that not many folks have done this.
Thanks!
Adrian
