Grid: Disable cell focus

Peter Hansson

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.

Any ideas ?

Peter

Kevin Klein

Bringing this back to life.

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.

Peter Hansson

"There is no use for individual cell selection ..."

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.

Kevin Klein

Agreed. Rows can be selected, cells can have focus.

Cell focus is sometimes undesirable and we would appreciate the option to disable.

Johannes Laidler

"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:

.v-grid-cell-focused:before {
        display: none !important;
    }

regards

Johannes

Peter Hansson

Thanks a lot Johannes. This was exactly the CSS I couldn't figure out how to do on my own.

Works for me on Valo theme at least.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Grid: Disable cell focus

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Grid: Disable cell focus

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.