May 12
Flex 3 AdvancedDataGrid DateFormatter Bug and Fix
ActionScript , Flex - Author:John Gag at 12:30 PM Add commentsThere is a little bug in the AdvancedDataGridColumn formatter. For whatever reason when you try to call the DataFormatter directly the year gets spit out incorrectly. The work around is to use a label function that calls the exact same formatter.
The below code shows the code that will throw an incorrect format and the correct format. I highlighted the 3 columns that are of importance. The start date calls the labelFunction which correctly formats the date. The end date uses the built in formatter which incorrectly displays the year and the hours worked uses the formatter to correctly format a number. I included the hours worked just to show that it is only a date problem.
Hope this helps someone from banging head on the wall!
<mx:Script>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
private function formatDate(item:Object, column:AdvancedDataGridColumn):String{
return dt.format(item[column.dataField]);
}
]]>
</mx:Script>
<mx:DateFormatter id="dt" formatString="MM/DD/YYYY H:NN A" />
<mx:NumberFormatter id="nf" precision="2" />
<mx:Panel width="100%" height="100%" layout="vertical">
<mx:AdvancedDataGrid id="adgEmpHours" designViewDataType="flat"
width="100%" height="100%">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="EmpID" dataField="employeeID" visible="false"/>
<mx:AdvancedDataGridColumn headerText="First Name" dataField="firstName" />
<mx:AdvancedDataGridColumn headerText="Last Name" dataField="lastName"/>
<mx:AdvancedDataGridColumn headerText="Line" dataField="lineTypeID"/>
<mx:AdvancedDataGridColumn headerText="Start Time" dataField="startTime" labelFunction="formatDate" />
<mx:AdvancedDataGridColumn headerText="End Time" dataField="endTime" formatter="{dt}" />
<mx:AdvancedDataGridColumn headerText="Hours Worked" dataField="hoursWorked" formatter="{nf}" />
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Panel>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
private function formatDate(item:Object, column:AdvancedDataGridColumn):String{
return dt.format(item[column.dataField]);
}
]]>
</mx:Script>
<mx:DateFormatter id="dt" formatString="MM/DD/YYYY H:NN A" />
<mx:NumberFormatter id="nf" precision="2" />
<mx:Panel width="100%" height="100%" layout="vertical">
<mx:AdvancedDataGrid id="adgEmpHours" designViewDataType="flat"
width="100%" height="100%">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="EmpID" dataField="employeeID" visible="false"/>
<mx:AdvancedDataGridColumn headerText="First Name" dataField="firstName" />
<mx:AdvancedDataGridColumn headerText="Last Name" dataField="lastName"/>
<mx:AdvancedDataGridColumn headerText="Line" dataField="lineTypeID"/>
<mx:AdvancedDataGridColumn headerText="Start Time" dataField="startTime" labelFunction="formatDate" />
<mx:AdvancedDataGridColumn headerText="End Time" dataField="endTime" formatter="{dt}" />
<mx:AdvancedDataGridColumn headerText="Hours Worked" dataField="hoursWorked" formatter="{nf}" />
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Panel>
Jun 8, 2009 at 6:13 AM thanks for the heads up! i was "about" to bang my head.. lol any idea if they will fix this control?
Jun 9, 2009 at 10:45 AM @Khalid - I hope so. These little things take time to figure out.
Feb 21, 2010 at 5:06 AM Pososi moi hui