Dec 12

Override rendering of column from SmartGWT data source

Tag: Gwt,Java,Programming,smartgwtAbhijeet Maharana @ 10:17 pm

SmartGWT widgets can render themselves sensibly using the data source definition. So for a grid, we don’t need to define the columns explicitly. However, we can override the rendering of some or all columns as needed.

Assume that our data source and data looks like this:

class CompanyDataSource extends DataSource {
	public CompanyDataSource(String id) {
		setID(id);
 
		DataSourceTextField companyName = new DataSourceTextField("company", "Company");
		DataSourceFloatField price = new DataSourceFloatField("price", "Price");
		DataSourceDateField lastChanged = new DataSourceDateField("lastChanged", "Last Changed");
		setFields(companyName, price, lastChanged);
	}
}
"3m Co", "71.72", "9/1 01:25 AM"

And the grid that renders this data

DataSource dataSource = new CompanyDataSource(“companyList1”);
dataSource.setClientOnly(true);
 
ListGrid companyGrid = new ListGrid();
companyGrid.setHeight(300);
companyGrid.setWidth(500);
companyGrid.setTitle("SmartGWT grid");
companyGrid.setDataSource(dataSource);
companyGrid.setAutoFetchData(true);

To override the display format of lastChanged column, one approach would be

ListGridField lastChangedField = new ListGridField("lastChanged", "Last Changed (new title)", 180);
CellFormatter dateFormatter = new CellFormatter(){
	public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
 
		DateTimeFormat inputFormat = DateTimeFormat.getFormat("d/M hh:mm a");
		DateTimeFormat outputFormat = DateTimeFormat.getFormat("MMM dd HH 'hours' mm 'minutes'");
		Date inputDate = inputFormat.parse(value.toString());
		String output = outputFormat.format(inputDate);
 
		return output;
	}
};
 
lastChangedField.setCellFormatter(dateFormatter);
companyGrid.setFields(lastChangedField);

We define a ListGridField with the same name “lastChanged” as in the data source. SmartGWT will use this name to do the merge. Our custom cell formatter matches the input date format and returns it in a different format.

But now the grid will only display this field. To cause it to display other data source fields as they are, we need to call

companyGrid.setUseAllDataSourceFields(true);

We can also override the date format in the data source itself so that all widgets sourcing this data will reflect it. As I was thinking about this, I came across this post on the SmartGWT forums. The API will support this functionality soon and as that thread also mentions, for formatting dates, you can use ListGrid.setDateFormatter() and DateItem.setDisplayFormat().

Thats it for this time. Ill keep posting tidbits as I learn along the way.

3 Responses to “Override rendering of column from SmartGWT data source”

  1. Sanjiv Jivan says:

    Nice. DataSource inheritance is another neat feature of SmartGWT that would a a good topic to write about.

  2. Abhijeet Maharana says:

    Sounds like a good idea! Will try that sometime. Thanks for the suggestion Sanjiv.

  3. Gertrude Reber says:

    I have been hunting this for a good time, thanks for posting

Leave a Reply