CODEWITHSUNDEEP
vaadinvaadin-flowvaadin-grid
s7ygian
s7ygian

Reputation: 1

In a grid with many entries it is not possible to navigate to certain sections (e.g. to the end) of the grid with the vertical scrollbar

In Vaadin Flow I am currently using a view with a grid that displays the data from a Spring Data Repository with many entries (100K+) via lazy loading.

So far so good. The grid can be scrolled to the end with the mouse wheel (which of course takes a long time), but it is not possible to directly navigate to certain sections within the grid with the vertical scrollbar. It is also not possible to drag the scrollbar all the way down with the mouse expecting the last row of the grid to be displayed. Instead, the scrollbar jumps back up a bit each time and the grid just reloads the next entries.

The scrollbar also does not have the correct size initially when loading the grid. At the beginning it is quite long and gets smaller the further you scroll down.

Vaadin Flow version used: v24.0.2

Currently I use the following code snippet in my view:

private Component pagedGrid() {
    var grid = new Grid<>(Test.class);
    grid.setColumns("id", "test");
    grid.setItems(VaadinSpringDataHelpers.fromPagingRepository(repo));
    return grid;
}

What can be done to make the vertical scrollbar behave as expected?

Upvotes: 0

Views: 113

Answers (1)

Jean-Christophe Gueriaud
Jean-Christophe Gueriaud

Reputation: 1378

It's because you didn't set the item count so the scroller will grow every time you're scrolling to the end of grid until you have no item left. One way to avoid it is to set an item count or use a dataprovider. For example:

dataView.setItemCountCallback(q -> getPersonService().getPersonCount());

You can read it on the official documentation: https://vaadin.com/docs/latest/binding-data/data-provider/#improving-scrolling-behavior

Upvotes: 3

Related Questions