Vaadin Grid - link in grid rows

Hi ,

Am using vaadin grid for data display , i want to add normal link and its listener (basically i want download file onclick of link ) ,

but grid not allowing to add normal link , it takes only hyperlink (HTML Rendered)

how should i do this ?

If you by “normal link” mean a Link component, try using the ButtonRenderer. Haven’t tried it myself, but if it doesn’t accept a Link, then just add a Vaadin Button and add the style ValoTheme.BUTTON_LINK to it.

Hi Kim ,

thanks for reply , yes i tried it but no luck :frowning: , it takes directly as button component only .

That’s right, it’s a native button and not a Vaadin button - forgot that. Anyway, use
CSS to style the button as a link
.

button {
   background:none!important;
   border:none;
   padding:0!important;
   font: inherit;
   /*border is optional*/
   border-bottom:1px solid #444;
   cursor: pointer;
}

Ok Kim will try that Thanks .

Hi Kim ,

i tried you above approach but still the same

for example have added grid column as button rendere
grid.addColumn(“Example”).setRenderer(new ButtonRenderer(new com.vaadin.ui.renderers.ClickableRenderer.RendererClickListener() {
@Override
public void click(RendererClickEvent event) {

        }
    }));

added css to button
Button button = new Button();
button.setCaption(“new link”);
button.setStyleName(“button”);

added to container
container.addContainerProperty(“Example”, Button.class, null);

it looks still looks like button only (please see attached image )

can you please help on this ??
21073.png

A bit of an older one but:
A ButtonRenderer is normally put on a Column of type String. There it will create a Native Button on the client side and use the content of the column as a caption. So in your case you would add a property of type String.class with the content being whatever you want the caption to be e.g. “new link”.
Then you add the ButtonRenderer to this column. This will give you buttons with “new link” as their caption.
To make them now look like links use the style Kim provided and use a selector like
.v-grid .v-nativebutton
(not entirely sure if it is correct as i have no example right now)
use a custom style name for the grid if you don’t want to change the buttons in all Grids.

Great It wroks :slight_smile: , Thanks Marius , Kim .

how to put button in each column dynamically in grid?
like attachments. i want to put ‘action’ in each row.
32212.png