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.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vaadin 8 + Grid + custom rendered = blank grid

Krzysztof Cichomski
6 years ago Jan 27, 2017 1:05pm
Krzysztof Cichomski
6 years ago Jan 27, 2017 1:27pm
David Heled
5 years ago Jun 04, 2017 1:25pm

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 !


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, "");


    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> {

    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;

public class MacAddressRendererConnector extends AbstractRendererConnector<Long> {
private static final long serialVersionUID = 6297059428539588111L;

    public MacAddressRenderer getRenderer() {
        return (MacAddressRenderer)super.getRenderer();


Teemu Suo-Anttila
5 years ago Jul 26, 2017 11:31am
Teemu Suo-Anttila
5 years ago Jul 26, 2017 11:33am

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

David Heled
5 years ago Jul 27, 2017 3:29am