View Full Version : Grid - multi-line cell, and colored-in cells with no data, how do I do this?

19 Apr 2012, 6:06 AM

Ok, I have been able to accomplish what I want using GWT CellTable, but I really like the GXT Grid.

So, here's what I'm trying to do, and I've been only partially successful so far. I think, also, that I might not be doing this in the best way, and so am looking for some guidance.

I am basically making a Grid where the first column contains information about a user, and the remaining columns are time slots (ie; 8:00am, 9:00am, etc).

The caveats are that:

The information about the user is broken up into 3 lines
The time slot information does not have any text, but should merely have the cell be color-coded.

So, my users are represented internally by a class called UserInfo.

In order to try to accomplish what I want in the caveats, I wound up adding a ColumnConfig<UserInfo, UserInfo> using the following ValueProvider:

public class UserInfoProvider extends AbstractValueProvider<UserInfo, UserInfo> {

public InspectionInfo getValue(UserInfo object) {
return object;

This already strikes me as something I would hope to bypass, but I need it for the AbstractCell to work.

So for that first column, I do a setCell on the ColumnConfig, and the class I use for the AbstractCell is:

public class UserSummaryCell extends AbstractCell<UserInfo> {

public void render(com.google.gwt.cell.client.Cell.Context context, UserInfo value, SafeHtmlBuilder sb) {
if(value != null) {

This works exactly as I expect. The first column, containing the user information, displays precisely as I wish.

However, this throws things off when I'm trying to color-fill the cells indicating when the user is logged in. I use a similar technique, with just the same UserInfoProvider, but then for the cells, I use the following class:

public class UsersOnDayTimeSlotCell extends AbstractCell<UserInfo> {
String timeSlot;

public UsersOnDayTimeSlotCell(Date timeSlot) {
this.timeSlot = DateTimeFormat.getFormat(PredefinedFormat.HOUR24_MINUTE).format(timeSlot).replaceAll("[^0-9]", "");

public void render(com.google.gwt.cell.client.Cell.Context context, UserInfo value, SafeHtmlBuilder sb) {
if(value != null) {
boolean isDuringInspection = (timeSlot.compareTo(value.getStartTime()) > -1) && (timeSlot.compareTo(value.getEndTime()) < 0);
sb.appendHtmlConstant(isDuringInspection ? "<div style='background-color: red'>&nbsp;</div>" : "");

What happens in this case is that, instead of filling the background of the entire square as red, it is treated as if a single line of text is to have a red background, which is not the effect I want.

I have also tried <div style='width:100%;height:100%;background-color:red'> instead, but it didn't make a difference.

Using Firebug, I've noticed that the div I have created in the render method is contained inside another div, which in turn is contained in a td.

It seems that it's this td element that I want to set the background color for.

So, how do I do that?

And, since it seems that the render method of my Cell classes are what I have to work with, can I skip the whole ColumnConfig in some way, yet ensure that the UserInfo objects are getting to the render method of the AbstractCell class, or is the ColumnConfig a must-have? (I think it is, but if it's unneccessary in my example, so much the better).