vaadinvaadin-flowvaadin-grid

Display LitRenderer grid cell button as a link in Vaadin 24


I have a button inside a grid cell defined as follows:

private static Renderer<LogRecord> createStatusRenderer(Grid<LogRecord> grid) {
    return LitRenderer
            .<LogRecord> of("<vaadin-button theme=\"${item.style}\" @click=\"${handleClick}\">${item.status}</vaadin-button>")
            .withProperty("style", r -> r.isFailed() ? "error" : "success")
            .withProperty("status", ComponentLogRecord::getStatus)
            .withFunction("handleClick", r -> {
                 if (r.hasMessage()) grid.setDetailsVisible(r, !grid.isDetailsVisible(r));
            });
}

Could you please advice how to modify that code in order to achieve the following:

  1. Display error button as a link (of red color).
  2. Display OK button as a simple text of green color.
  3. (alternative to 1) Display error button as simple text of red color with arrow down suffix.

My goal is to display a button as a simple grid cell text but advice user to click on error buttons to show error details.

I tried this approach, but without success. "tertiary-inline" theme works but it's not quite clear how to specify additional style class in template. Also "text-decoration: underline;" doesn't work even if I specify it directly in browser developer console ...

Thanks in advance


Solution

  • Below is the sollution I finally implemented. I was not able to implement underline but implemented an icon. May be it is not the best one but working and probably would be useful for somebody.

            return LitRenderer.<LogRecord> of("""
                        <vaadin-button theme="${item.theme}" style="font-weight: 400" @click="${handleClick}"> \
                            <vaadin-icon icon="${item.icon}" slot="suffix"></vaadin-icon> \
                            ${item.status} \
                        </vaadin-button>
                        """)
                    .withProperty("theme", r -> r.isError() ? "tertiary-inline error" : "tertiary-inline success")
                    .withProperty("status", LogRecord::getStatus)
                    .withProperty("icon", r -> r.isError() ? "vaadin:angle-down" : "")
                    .withFunction("handleClick", r -> {
                        if (r.hasMessage()) grid.setDetailsVisible(r, !grid.isDetailsVisible(r));
                    });