I’m looking for a way to turn off cell focus on the Grid component.
I use Grid with the
Vaadin ContextMenu Add-On and this gives me nice right-click features as in the screenshot below.
However, as you can see from the screenshot this is rather confusing with the cell focus feature. In the screenshot I’m actually right-clicking the 2nd row but I bet any user will be confused because the cell above it is highlighted. Ideally I would like to turn off cell focus completely for this grid, but I don’t think there’s an API way of doing it ??
I’ve tried doing it via CSS but it is rather difficult to do correctly as CSS doesn’t allow you to “revert”, it only allows you to override. In order to do it correctly my CSS would need to have knowledge about what the CSS attributes were before they were overriden by the
v-grid-cell-focused style. (as far as I can tell the focused cell style changes more than just the border)
Alternatively if there was a way to set cell focus programmatically? If so I could set the cell focus on right-click as well. Then there would be consistency between the cell which is right-clicked and the cell which is highlighted.
We have a Grid that displays data that is read-only. Users can select a row to perform some operation on. There is no use for individual cell selection, so we want to turn it off, especially as it interferes with row double-clicks.
You mean cell focus. I understand what you mean - and we are indeed talking about the same thing - but we need to be precise here. Selection and focus are separate concepts. The cell focus outline is shown even when the grid is not selectable (
SelectionMode.NONE ). Care should be taken to distinguish the two concepts. To be precise in Vaadin Grid there’s no such thing as
cell selection . Only row selection exist. But there’s a concept of
cell focus .
In any case I’ve created
ticket 19842 on the matter.
If anyone has some solid CSS to turn off Grid’s cell focus feature then please post. By solid I mean something that would work regardless of theme. It is discussed in
this ticket but no solution.
“I’ve tried doing it via CSS but it is rather difficult to do correctly as CSS doesn’t allow you to “revert”, it only allows you to override. In order to do it correctly my CSS would need to have knowledge about what the CSS attributes were before they were overriden by the v-grid-cell-focused style.”
Hi Peter,
i don’t know how you can revert/recreate the focus style, but you can remove cell focus with:
