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:
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
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));
});