ColorPicker renderer interferes with ColorPicker editor in Vaadin 8 Grid?

I have a Color column in a Vaadin 8 Grid to which I assign a ColorPicker as the editor.

Column<VaadinFactAlertSetting, Color> fgColorCol = grid.addColumn(setting -> setting.getFgColorVaadin());
fgColorCol.setEditorBinding(binder.bind(new ColorPicker(), VaadinFactAlertSetting::getFgColorVaadin, VaadinFactAlertSetting::setFgColorVaadin));

Which works fine. But I’m having trouble using a ColorPicker as the renderer as well (I want the renderer to achieve the same visual result as an inactive editor).

There are two problems:

  1. It seems to interfere with the editor so that the setFgColorVaadin is never called.
  2. Having trouble getting the renderer to show the correct current color value.

I’ve tried different things but as one example:

		fgColorCol.setRenderer(new ValueProvider<Color, ColorPicker>() {
			public ColorPicker apply(Color source) {
				ColorPicker cp = new ColorPicker();
				return cp;
		}, new ComponentRenderer());

Any ideas or help is appreciated.


I see my confusion now.

Being new to Vaadin I wasn’t realizing it wasn’t going into editor mode when I clicked it (double-click required for that) so it was still the renderer which of course did nothing with the changed value.

So you have two choices for a solution:

  1. Add a ValueChangeListener to the renderer to capture the change.
  2. Set the renderer ColorPicker to read-only mode so the user is forced to double-click and go to edit mode.