How to style edited row in grid - Vaadin 14

Flow
1

Hi,

Is there any way to style the row opened in the grid editor? When inspecting the rows in browser I could not see any special class for that.

What I would like to do is highlight the edited row with adding border to it.

Thanks,
Erik

2

You can add classname genarator, something like the following

grid.setClassNameGenerator(item -> {
	if (grid.getEditor().isOpen() && grid.getEditor().getItem().equals(item)) {
		return "editing";
	} else {
		return "";
	}
});

And then you need “grid-styles.css”, like below, to be imported with @CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")

.editing {
	border: 1px solid black;
}

Now, note this will draw a border around each cell in that row. Not around the row itself. At the moment it is not possible to target the row. There are some internal hygiene reasons why it is not made possible. The Java doc of the Grid was not clear enough on this, thus I proposed a change

https://github.com/vaadin/vaadin-flow-components/pull/651

3

Tatu Lund:

You can add classname genarator, something like the following

grid.setClassNameGenerator(item -> {
	if (grid.getEditor().isOpen() && grid.getEditor().getItem().equals(item)) {
		return "editing";
	} else {
		return "";
	}
});

And then you need “grid-styles.css”, like below, to be imported with @CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")

.editing {
	border: 1px solid black;
}

Now, note this will draw a border around each cell in that row. Not around the row itself. At the moment it is not possible to target the row. There are some internal hygiene reasons why it is not made possible. The Java doc of the Grid was not clear enough on this, thus I proposed a change

https://github.com/vaadin/vaadin-flow-components/pull/651

Thanks, perfect solution!