Grid: render a cell icon based of other column

Vaadin 6 / 7 / 8
1

Hi,
I’m using Vaadin 7.7.5.

I have grid component with SQLContainer (property IDs: Time, Prev_Time) as ContainerDataSource.

By default my grid looks something like this:
TIME | PREV TIME
10 9
20 30

I want to add arrow up or arrow down icon to TIME cell based on PREV_TIME vale:

  • if TIME > PREV_TIME → arrow up
  • if TIME < PREV_TIME → arrow down

and get something like this:
TIME | PREV TIME


10 9


20 30

How to do it?

Regards
Kamil

2

Hi,

sounds like you’re looking for a
GeneratedPropertyContainer
, which you can wrap around your SQLContainer. For the arrow icon, you can use some
Renderer
, maybe an ImageRenderer or a HTMLRenderer.

-Olli

3

Hmm, I will try GeneratedPropertyContainer as you suggested but I’m afraid I might have the problems with sorting.

Kamil

4

You should be able to implement sorting as well. Just create a custom item sorter and pass it to the GP container.

-Olli

5

I did it like this (code below). It seems to work OK (generating columns and sorting values)…but I’m not fully sure.
In your opinion - is it OK or it should be done in other way? Generally: I want to sort newVAL property values based on TIME property values sorting.

.addGeneratedProperty("newVAL", new PropertyValueGenerator<String>() {

private final String propID = "TIME";
private final String propID_prev = "PREV_TIME";

@Override
public String getValue(Item item, Object itemId, Object propertyId) {

   Number val = null;
   if (item.getItemProperty(propID).getValue() != null)
      val = (Number) item.getItemProperty(propID).getValue();

   Number val_p = null;
   if (item.getItemProperty(propID_prev).getValue() != null)
      val_p = (Number) item.getItemProperty(propID_prev).getValue();

   if (val != null && val_p != null) {
      if (val.doubleValue() > val_p.doubleValue())
         return "<font color=\"green\">" + FontAwesome.ARROW_CIRCLE_UP.getHtml() + "</font>" + " " + item.getItemProperty(propID).getValue();
      else if (val.doubleValue() < val_p.doubleValue())
         return "<font color=\"red\">" + FontAwesome.ARROW_CIRCLE_DOWN.getHtml() + "</font>" + " " + item.getItemProperty(propID).getValue();
      else
         return FontAwesome.ARROWS_H.getHtml() + " " + item.getItemProperty(propID).getValue();
   } else
      return item.getItemProperty(propID).getValue().toString();
}

@Override
public Class<String> getType() {
   return String.class;
}

@Override
public SortOrder[] getSortProperties(final SortOrder order) {
   return new SortOrder[] { new SortOrder(propID, order.getDirection()) };
}

});

Kamil

6

Looks ok to me.

-Olli

7

Thank you very much for your help!

Best regards
Kamil

8

You’re welcome, drop a line if you need more help!

-Olli