vaadin-checkbox in TemplateRenderer how to set checked. Vaadin 14

Flow
1

Hi, I cannot find a solution to set checked property of a vaadin-checkbox:

gridMerchants.addColumn(TemplateRenderer.<Merchant>of(
				"<vaadin-checkbox [[item.enabled]
]></vaadin-checkbox>"
		)
		.withProperty("enabled", m -> m.isEnabled() ? "checked" : "")
);

I also tried to use this way:

gridMerchants.addColumn(TemplateRenderer.<Merchant>of(
		"<vaadin-checkbox checked=\"[[item.enabled]
]\"></vaadin-checkbox>"
)
.withProperty("enabled", m -> m.isEnabled() ? "true" : "")
);

Can anyone help me with this?

2

Hi, the checkbox has checked property of boolean type on the client side.

Can you please try if the following would work?

gridMerchants.addColumn(TemplateRenderer.<Merchant>of(
		"<vaadin-checkbox checked=\"[[item.enabled]
]\"></vaadin-checkbox>"
)
.withProperty("enabled", m -> m.isEnabled())
);
3

Thanks a lot, that did a trick!
I didn’t realize that boolean must be set instead of string “true”, i.e. this works
.withProperty("enabled", Merchant::isEnabled)

but this does not .withProperty("enabled", m -> m.isEnabled() ? "true" : "")

Can you please give me any guidance on the following issue:
when the checkbox is clicked I can handle it with .withEventHandler(...) - that’s ok.
But I have no event object inside handle method, thus I don’t know the real state of the element, e.g. I don’t know a selected value of vaadin-combo-box.

How can I approach this case? Should I create a custom component/template with some js etc.?? Is there any documentation on this?

4

Hi, the documentation related to Grid can be found here:
https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid.html

I agree that we should improve it, especially talking about withEventHandler etc.

To me it looks like you are implementing in-row editing? Have you considered using [Grid editor]
(https://vaadin.com/components/vaadin-grid/java-examples/grid-editor) API instead of a custom code?

5

I have a grid with ~ 400 rows, each of them has a pair of ComponentColumns. It turned out to be much slower than Vaadin 8 implementation of the same grid. After reading docs, I realized that it’s better to use TemplateRenderer for the sake of performance. I’ve tried it, and it really is.

But the only problem: there is no possibility to get event inside of EventHandler. So when one selects a value in a combobox/checkbox - the handler knows nothing about this value.

For now I’m trying to understand if anything can be done about it? Do I need to implement a custom template/component or just to find some workaround? Can you give me any advice on this, please?

It’s a kind of in-row editing, as a user can only use several checkboxes, a pair of comboboxes and no TextFields at all. In this case Grid editor with “edit” button looks like an acceptable way to go. Thanks for pointing it out.