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 :slight_smile:

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 [b]
MacAddressRenderer
/b).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 {

@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 {
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 [font=courier new]
getMacStringFromLong[font=arial]
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
[/font]
[/font]

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