Grid set navigation by row

marcos.a.mussi · December 31, 2024, 11:57am

Hello,

Is it possible to implement a method in the Grid to choose to navigate by row and that once this mode is activated, the row selection is automatic, as it worked in Table (Vaadin 7)?

Stefan.27 · December 31, 2024, 2:53pm

There is a cookbook recipe: How do I select Grid rows automatically using up/down arrow keys - Vaadin Cookbook

And maybe this one is helpful, too: How do I excel like cell selection in a grid - Vaadin Cookbook

marcos.a.mussi · February 14, 2025, 8:20pm

Hi,
Where can I find this css file?

“./recipe/grid-arrow-selection/vaadin-grid-styles.css”

used in this example:

How do I select Grid rows automatically using up/down arrow keys - Vaadin Cookbook

marcoc_753 · February 15, 2025, 6:54pm

github.com

vaadin/cookbook/blob/main/frontend/recipe/grid-arrow-selection/vaadin-grid-styles.css

/* hide the focus ring that would normally be displayed around the active cell
due to keyboard navigation as it results in a flickery look and feel*/
:host([navigating]) [part~="cell"]:focus::before {
  content: none;
}

Tatu2 · February 17, 2025, 6:24am

There is also this is add-on in the Directory, which wraps the functionality

marcos.a.mussi · February 17, 2025, 2:51pm

Hello,

The inclusion of the CSS worked correctly, thank you very much for your feedback.

The only issue is the focus in the select method.

By default, our applications always select the first item in the grid after performing a search in the database and allow the user to navigate through the grid items using the keyboard.

However, when executing the command below, the item is selected, but keyboard navigation does not work. It is necessary to click on the grid item, losing the selection, and then select it again for keyboard navigation to work. How can we get around this issue?

select(getListDataView().getItem(0));