Custom DateDisplayFormat in the SmartGwt ListGrid Cell

ListGridField provides the method setDateFormatter( DateDisplayFormat dateFormatter) . However the argument DateDisplayFormat is an Enum class which provides some standard date formats and user is not allowed to modify them. This creates the problem when the user wants to customize the date format.

Here you can see how the ListGridField of type Date can be formatted to custom format.

This is an example to display a date in the format 2010.03.12 18:56

This is done using
1. com.smartgwt.client.widgets.grid.CellFormatter and
2. com.google.gwt.i18n.client.DateTimeFormat

Working with normal cell type which is generally String is very familiar to all. Well obviously it is too simple. This is done as

ListGrid myListGrid = new ListGrid();

ListGridField normalField = new ListGridField("normal","Normal");
normalField.setWidth(50);

Now for the cell to be of type Date, it should be set to type Date. Lets define a field for date:

ListGridField dateField = new ListGridField("date", "Date");
dateField.setType(ListGridFieldType.DATE);
dateField.setCellFormatter(new CellFormatter() {

@Override
public String format(Object arg0, ListGridRecord arg1, int arg2, int arg3) {
DateTimeFormat fmt = DateTimeFormat.getFormat("dd.MM.yyyy hh:mm");
return fmt.format(arg1.getAttributeAsDate("date"));
}
});
dateField.setAlign(Alignment.LEFT);

dateField.setWidth("180px");

this is it. We have defined a normal field and a date field. These should be added to our ListGrid before we insert data.

myListGrid.setFields(normal,date,);

now finally data is inserted as:

myListGrid.setData( myRecords);

here myRecords is the array of ListGridRecord and it should constitute relavant data as the fields defined to the myListGrid. In this case the simple ListGridRecord could be:
ListGridRecord[] myRecords = new ListGridRecord[2];

ListGridRecord rec = new ListGridRecord();
rec.setAttribute( "normal", "1");
rec.setAttribute("date", new Date(2010 - 1900, 7, 12));

myRecords[0] = rec;

rec.setAttribute( "normal", "2");
rec.setAttribute("date", new Date(2010 - 1900, 6, 16));

myRecords[1] = rec;

myListGrid.setData(myRecords);



Thats all u need to do. Now the display in this case will be

2010.7.12 XX:YY //XX:YY are hrs and min depends upon time of creation
2010.6.16 XX:YY