After the honeymoon, Tip 1

Its been about 2 months since i started using adobe flex in billable anger, and
even the best platform looses some of its ability to escape criticism in that
time, flex however is proving to be everything that I had hoped for, but you
still bump into the odd thing that domino does much better, so I’m doing a
series of tips and tricks to help you get everything from both systems
(especially when used together).

Todays tip is sortable date columns in flex data grids

Flex data grids are a wonderful thing, with easy sorting and sizeable columns
and such, but one thing sucks on them, and that’s the fact that they only do
TEXT sorting, dates are just treated like text which means that all of the
common date formats wont sort correctly, Booooo!, but we can fix that
surprisingly easily

First you want to output your date data from notes in YYYYMMDD format, why??
because this formats displays the same when sorted textually or chronologically

so in a view that would be (its a bit long as we need to pad the short
days/months (thanks to Ben Poole for pointing this out))

edited by popular vote to a shorted version

@Text(@Year(LossDate)) + @Right(“0” + @Text(@Month(LossDate));2) + @Right(“0” +

if your using a web service to return that value, the Java code would be

import java.util.Date;
import java.text.DateFormat;
import java.text.SimpleDateFormat;

Item dateitem = doc.getFirstItem(“DateIWant”);
DateTime notesdate = dateitem.getDateTimeValue();

DateFormat dateFormatordered = new SimpleDateFormat(“yyyyMMdd”);

String UpdDtSort=dateFormatordered.format(notesdate);

if you using lotusscript for you webservice then your on your own!!.

Now into flex and define a “Dateformater”, this is my personal fav date format
(is it sad that i have one) and produces dates like “Tue May 04 2009″, which i
find removes many problems with international formats causing confusion.


Next you will need your actual datagrid (which you will already have if you
have discovered this problem).

<mx:DataGrid width=”740″ height=”126″ x=”10″ y=”34″ id=”datesortview”
dataProvider=”{mynotesview}” fontFamily=”Arial”>


You will notice the “labelFunction” at the end of the date column, that calls
the following function (and passes the parameters automatically).

private function dateLabel(item:Object, column: DataGridColumn) : String {
if (item[column.dataField] != null) {
var TempDate:Date = DateField.stringToDate(item[column.dataField],
return dateFormatternice.format(TempDate);
} else {
return “”;

This basically just takes in each value in the column, converts it to a date
using a mask, formats to a pretty format and returns it back to the column. it
is MUCH faster than attempting a code based sort solution (as some people use
in flex using “sortCompareFunction” on a datagrid).

your column now has 2 values the underlying data format in the happily sortable
“20090504” and the label format that the user sees in the format “Tue May 04
2009”, yet again a feature we took for granted in notes requires a bit of
coding to get it in other platforms.

Leave a Reply

Your email address will not be published.