Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

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

Grid: Disable cell focus

Peter Hansson
6 years ago Feb 22, 2016 7:39pm

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
5 years ago May 24, 2016 8:51pm
Peter Hansson
5 years ago May 24, 2016 10:13pm
Kevin Klein
5 years ago May 24, 2016 10:26pm
Johannes Laidler
5 years ago May 25, 2016 6:06am
"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
5 years ago May 26, 2016 5:34am

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.