How to get event and change on a checkbox in a grid

Flow
1

Hi everyone. I have added a checkbox in a grid column with the method addComponentColumn().
But I don’t know how I can get the event when the user check or not the checkbox to store the value in my database ?
Thank you in advance.

2

Did you try adding a value change listener to it?

1 Like
3

As @knoobie mentioned, you can just add a value change listener on the checkbox when you are creating it. At that point you’ll have a reference to row item and can save it, as well as refresh it in the grid (through the data provider’s .refreshItem(updatedItem) method).
So it could look something like this:

grid.addComponentColumn(row -> {
	var checkbox = new Checkbox();
	checkbox.addValueChangeListener(event -> {
		row.setMyBoolean(event.getValue());
		saveToDb(row);
		grid.getDataProvider().refreshItem(row);
	});

	return checkbox;
});
1 Like
4

Thank you it was so simple :stuck_out_tongue_winking_eye: .

5

My users didn’t like the fact that they always had to double-click to start edit a cell with a boolean value in a GridPro. Only the double-click turns the visible, read-only value (which you created with the conditional litrenderer) into an editable component (e.g. a checkbox) at least, if you use a componentColumn. They found that cumbersome. I then had the LitRenderer insert a native checkbox directly into the GridPro. It is directly clickable and my customers were satisfied.

String litTemplate = """
   <input type="checkbox" @change=${(e) => toggle(e.target.checked)} ?checked=${item.checked} >
""";
grid.addColumn(LitRenderer.<MyDto>of(litTemplate)
    .withProperty("checked", MyDto::isOrdered)
    .withFunction("toggle", (dto, args) -> this.toggle(dto, args.getBoolean(0))))
    .setHeader("Ordered");