Migration Vaadin 7 to Vaadin Flow

Flow
1

We have an application developed with Vaadin 7, which makes intensive use of Table and TabSheet.

We have started migrating to Vaadin Flow and are facing serious issues, especially with these two components.

• Grid - navigation through up and down arrows does not select grid line.

• Tabs - We do not understand the working model of this component. In TabSheet it is very simple to add a Tab with its content, in Tabs it seems that the Tab and its content are completely separate things.

2

is anyone there?

3

@Grid: That’s mostly correct, when selecting a grid row and then using the arrow keys, the focus changes (blue border). When hitting space, the focused row will be selected. Don’t know, if there is some way to circumcise that behavior (for instance by using client side API).

@Tab: That’s also correct. The intention is to allow a more flexible layouting of tabs and tab content, which might not always be tight connected to each other. But there are already addons to bring back the old way of using tabs: https://vaadin.com/directory/component/paged-tabs

4

Hi Stefan,
In Table (Vaadin 7) we use the valueChanged event a lot with arrow navigation, which triggers events to load other data into forms automatically, if we depend on the user using the spacebar, the application behavior will change a lot. For us, the ideal is for Grid to be selected using arrow navigation, it could be a Grid property to enable as needed.

5

Hi,
Has there been any change since the last answer to this question?

Thanks

6

Hi,

I don’t think so.
For tabs, paged-tabs add-on is corresponding to the old behavior.
For the grid, if you are navigating with arrow it doesn’t select the row.
There is this add-on for multiselection that mimics the Vaadin 7 table multi-selection mode: https://vaadin.com/directory/component/selection-grid/overview

You can change the default behavior of the Grid to do what you want.
This is the relevant code in the add-on: https://github.com/vaadin-component-factory/selection-grid-flow/blob/main/selection-grid-flow/src/main/resources/META-INF/resources/frontend/src/selection-grid.js#L31
It’s using the internal API of the grid component and could be simplify a lot for single selection.

7

Hi Jean, Thanks for your response.

I’m using Vaadin Flow 19, and with SelectionMode.SINGLE it’s not working

Do you plan to upgrade?

8

Hi,

There is currently no plan to upgrade the library to Vaadin 19 or to make it work in SINGLE MODE.

There is an open issue: https://github.com/vaadin-component-factory/selection-grid-flow/issues/16

9

Hi Vaadin Team Development,

I need a position from Vaadin if it will be possible, and when, include navigation in the GRID component (Up arrow, down arrow) triggering selected row events, to define whether or not we will continue with Vaadin in the development of our applications.

I really don’t understand why a feature as basic as this, already present natively in the Table component of Vaadin 7, was not implemented in the GRID component.
Please, I need an answer on this question.

10

I really don’t understand why a feature as basic as this, already present natively in the Table component of Vaadin 7, was not implemented in the GRID component. Please, I need an answer on this question.

There is ongoing work to implement cell focus tracking event in Grid. The client part has been already completed, but Java API has not been done yet. It is at the moment hard to forecast in which release this will eventually land to.

https://github.com/vaadin/web-components/pull/176

But when complete, you can follow in which cell / row the focus is and do what you want with it. E.g. you could move the selection or do something else.

11

Hi Tatu,

Thanks for answering me.

It would be very important for us to have a view of the release of this feature in the product roadmap.