Grid: How to render a cell value based on other columns

Hi,

I’m using Vaadin 7.6.4 and my use case is:

I have an event bean with
start
,
end
and a
all-day
fields, which I put in a BeanItemContainer and use in a grid component.

I would like to render my date cells following these rules:

  • If the all-day flag is true I do not want to render the time part of the dates
  • If the date parts of start and end are equal to each other and only the time part differs, I only want to render the time part of the end date.

Displaying only the relevant information will increase the usability and enables my users to “scan” the grid more efficiently as they are not disturbed by redundant or irrelevant information.

Alternative I thought about:

  • Use
    Strings
    instead of Dates and render the dates myself but this would break
    sorting
    for localized dates
    .
  • The
    GeneratedPropertyContainer
    could be used to generate/overwrite the cell but I might have the problems with sorting as well.

Is there a way to access the other columns of a row from a
com.vaadin.ui.renderers.Renderer?

Thanks and BR
,

Michael

You can do this on client side, but you need to do custom renderer. Here you can see an example how value is been handled in signle cell. In your specific application you have domain knowledge what column indexes to check. So by usign similar methods it is possible to e.g. compare the value of the cell being rendered to values of the some other columns and do something based on that. Naturaly such Renderer wont be generic, but specific to your application only.

https://github.com/vaadin/grid-renderers-collection-addon/blob/master/grid-renderers-collection-addon/src/main/java/org/vaadin/grid/cellrenderers/client/editable/TextFieldRendererConnector.java

You can read the content of a cell per row by using the code found here:

https://vaadin.com/forum#!/thread/12761536

Then, after setting the style name of the row you could use td:nth-of-type() to style the td cell in that row, or change the value with jQuery.

@Tatu: Thanks. If I understand correctly, using the client-side approach all my date localization is done on the client side and the server side simply send JsonValues with the relevant information. I will try this asap.
@Burke: Thanks. But setting styles to indicate a certain value and then reading and changing it with jQuery or pure Javascript is a little unusual. Don’t get me wrong its a interessting idea but quite a hack ;).

In general I hoped for a easier solution. Because the task at hand seems so common. I digged a bit deeper and found:


RowDataGenerator

In com.vaadin.ui.Grid.RowDataGenerator.writeData(CellReference, JsonObject) I see

Item item = cell.getItem(); which is exactly what I need but the
item
it is not provided to the renderer. Every Grid and every Custom Renderer (Server) has its own instance so setting the currently processed row item to the AbstractRenderer would be great althought the question ist whether Vaadin is willing to add such change to the framework?


Renderer extends AbstractGridExtension

Another way would be com.vaadin.ui.Grid.AbstractGridExtension.getItemId(String) because every existing (server-side) Renderer extends AbstractGridExtension but while encoding the modelValue I do not have access to the
rowKey
needed

Thanks again for your answers.

BR,
Michael

Currently hanging at the same point, also seen the getItemId() method but found no way to use it.
Currently I am looking into the CLickableRenderer, as it uses the getItemId() method by propagating back the rowKey. Unfortunately this needs clientside development and I cant get my renderer to return the correct shared state somehow.

If you ever find a solution please post it :slight_smile:

Hi,

This is a common problem with the original design of the renderers. You can work around it by using GeneratedPropertyContainer, which can create a combination property of the two values your renderer is interested in.

I wrote on another topic about the actual use of the getItemId(String) method
here
.

//Teemu