Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Vaadin 8 + Grid + custom rendered = blank grid
Hi,
I have a vaadin8 grid which works perfectly fine when I use a built in Renderer, for ex:
com.vaadin.ui.renderers.DateRenderer
grid.addColumn(SomeDto::someDate), new com.vaadin.ui.renderers.DateRenderer()).setCaption("someDate);
But if I try to implement my own Rendered I get a blank grid, no column, nothing - just the scroller.
I even tried and copy-pasted the content of com.vaadin.ui.renderers.DateRenderer into a new my.sample.DataRendererCopy and used it like this:
grid.addColumn(SomeDto::someDate), new my.sample.DateRendererCopy()).setCaption("someDate);
No luck.
Happens on todays Vaadin 8.0-SNAPSHOT (8.0-20170127.010204-148)
Any ideas?
Ok, my bad.
What I was looking for was a simple 'converter' to convert from Date to String.
Looking at the docs a renderer is responsible for rendering on client side, requires a client side rendered and a connector. Overkill for my needs :)
What is the vaadin8 way of doing a custom .toString?
Instead of packing the conversion into the addColumn lambda obviously...
Well, I am facing the same problem ...
I am trying to develop a custom grid column renderer that will simply render a Long value to a MAC Address String format as aa:bb:cc:dd:ee:ff.
I was looking first at a conveter as k. mentioned above but with Vaadin 8.0.6 I coudn't find a way to add a converter to a grid coloumn - is there a way to do so ?
Then, following the explanation here, I was trying to develop a renderer ( see code below ), but all I get is an empty grid.
When looking into the data that is sent to the browser, I do see the JSON records with the right data rendered correctly, but the grid component itself is empty.
I did compile the client side and included the vaadin-client module in my pom.
Please help ?
Many thanks !
Dave
Layout :
grid.addColumn(MacAddress::getValue, new MacAddressRenderer()).setCaption("MAC Address");
Server Side :
package com.LERP.MacAddressComponent;
import com.LERP.utils.MACAddress;
import com.vaadin.ui.renderers.AbstractRenderer;
import elemental.json.JsonValue;
public class MacAddressRenderer extends AbstractRenderer<Object, Long> {
private static final long serialVersionUID = 634108443890642623L;
public MacAddressRenderer() {
super(Long.class, "");
}
@Override
public JsonValue encode(Long value) {
if (value == null) {
return super.encode(null);
} else {
return super.encode(MACAddress.valueOf(value).toString(), String.class);
}
}
}
Client Side :
package com.LERP.MacAddressComponent.client.MacAddressRenderer;
import com.vaadin.client.renderers.Renderer;
import com.vaadin.client.widget.grid.RendererCellReference;
public class MacAddressRenderer implements Renderer<Long> {
@Override
public void render(RendererCellReference cell, Long data) {
cell.getElement().setInnerText("Redner Something here ....");
}
}
The connector :
package com.LERP.MacAddressComponent.client.MacAddressRenderer;
import com.vaadin.client.connectors.grid.AbstractGridRendererConnector;
import com.vaadin.shared.ui.Connect;
@Connect(com.LERP.MacAddressComponent.MacAddressRenderer.class)
public class MacAddressRendererConnector extends AbstractRendererConnector<Long> {
private static final long serialVersionUID = 6297059428539588111L;
@Override
public MacAddressRenderer getRenderer() {
return (MacAddressRenderer)super.getRenderer();
}
}
Hi,
The easiest way to do Conversions in Vaadin Grid Columns is to apply the conversion either directly to the ValueProvider for the column:
grid.addColumn(item -> getMacStringFromLong(item.getLongMacAddress()));
or if you want to edit the Long value as is and have the MAC address only rendered in 8.1 you can do:
grid.addColumn(Item::getLongMacAddress, longMac -> getMacStringFromLong(longMac));
This will have the Column typed to Long and editing will be based on the Long value, the visual representation is the String returned from the getMacStringFromLong given to a default TextRenderer. If you want to use some other renderer (like HTMLRenderer) you can provide that as the third parameter.
Hope this makes it easier for you to display your data the way you want to!
//Teemu
And about the custom renderers. You need to have a client-side implementation of the renderer connector and instructions on how to render your data on the client-side as well. We have a few examples out there as well as some add-ons that contain custom renderers. To implement your own, I'd recommend taking a good look at this renderer collection
ThanksTeemu. This is exactly what I did eventually and it worked like a charm