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 :) 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.