Vaadin 8 Grid - FontAwsome as Clickable cell

Hi!

I’d like to have a clickable FontAwsome link/button in Grid column.

This renders fine, but is not clickable.

grid.addColumn(mp -> FontAwesome.LINE_CHART.getHtml(), new HtmlRenderer()); These doesn’t render at all

grid.addColumn(mp -> FontAwesome.LINE_CHART, new ImageRenderer<>(event -> this::onClick));
grid.addColumn(mp -> new ThemeResource("fonticon://FontAwesome/f013"), new ImageRenderer<>(event -> this::onClick));

Any ideas? Apart obviously from creating an image of the FontAwseme and using that as ThemeResource or creating custom Renderers.

Hi,

okay, so, this is a hack, but it works.

JavaScript.getCurrent().addFunction("executeOnServer", new JavaScriptFunction() { @Override public void call(JsonArray jsonArray) { // read parameters from jsonArray Notification.show("this is a notification sent from the server side"); } }); Grid<Bean> grid = new Grid<>(); grid.setItems(getBeans()); ValueProvider<Bean, String> vp = new ValueProvider() { @Override public Object apply(Object o) { Bean bean = (Bean) o; // getIcon() returns the FontAwesome HTML. Feel free to add parameters to the call String s = "<span onclick=\"executeOnServer();\">" + bean.getIcon() + "</span>"; return s; } }; grid.addColumn(vp, new HtmlRenderer()); -Olli

Hi,

A hack indeed :slight_smile: Unfortunately with an unwanted side effect - click selects a given row, whereas this doesn’t happen when using ButtonRenderer. I have a separate action for row selection, so this is bad.

Ah yes. It might be possible to get around that somehow, but adding hacks on top of hacks doesn’t sound like a great solution. Maybe a custom Renderer would be the easiest way; it doesn’t sound like it’s much different from ButtonRenderer after all.

-Olli

Have a look at
ClickableTextRenderer Add-on
which would do what you require.

I’m in the process of making it work for v8 too.