CDI/Grid problem when moving between screens/routes

Hi,

I have a very strange problem with a Grid on one screen not reloading data. I am not sure if this is a CDI problem or Vaadin Grid problem or something else, but would be very happy if someone had any insights.

I have reproduced the problem in a simple Vaadin 12 app.
The application has a MainView.java class with 2 “pages”, one (GridPage.java) is a subclass of VerticalLayout and the other (SimplePage.java) is a subclass of PolymerTemplate<SimplePage.SimplePageModel>.
The SimplePage component has no sub-content.
The GridPage component has one sub-component called GridScreen.
GridScreen.java has these:
@Id(“grid”)
private Grid grid;
@Id(“load”)
private Button load;

There is a menu that allows the user to switch between the 2 pages, page 1 is the GridPage view with it’s GridScreen component, page 2 is the SimplePage view with nothing inside.

When the application is loaded, it shows page 1. There I can click the “load” button to generate some data and add to the Grid with a DataProvider<PersonBean, Void>. This all works fine.
Then I click a link to go to page 2 (SimplePage.java) and it gets shown fine.
Then I click a link to go back to page 1 (GridPage.java) and it is shown again and the grid still has it’s data and all is good.

THE PROBLEM

The problem occurs if I scroll the grid in page 1 down a certain number of rows, don’t scroll back, go to page 2, then back to page 1.
If I scrolled the grid down LESS than a specific number of rows, then the grid is shown correctly when I come back to page 1 (except it is showing rows 1 and onwards).
If I scrolled the grid down MORE than the specific number of rows, then the grid is blank when I come back to page 1. And clicking the button to load data into it does nothing. Reloading the application (refresh on the browser url) is the only way to get things working again.

The grid has 1000 lines of generated data and around 15 are visible in the grid on-screen.
It uses lazy-loading to get data from the DataProvider as it is scrolled down. This works great, the Grid gets data from the DataProvider 50 rows at a time starting with 1-50, then 51-100, 101-150 and so on.

Scrolling the grid down so that row 93 or 94 become visible causes the grid to load the data for rows 101-150.
If I scroll the grid this far, then go to page 2, then back to page 1, the grid is blank.
If I only scroll down to row 92 or less, then go to page 2 and back to page 1, the grid has data.
If I scroll to the end of the list (row 1000), then scroll back to row 92, go to page 2 and back to page 1, the grid has data.

There is nothing in the code that is done differently when the grid is scrolled to row 92 or 93 or 94 or 1000. So it feels like this is some strange problem with memory management and CDI and component scoping or smth.
The GridScreen class is annotated with @UIScoped.
The GridPage and SimplePage classes have @Route annotations to allow the use of http://server/app/page urls to switch between pages.

I have attached the test project and some screenshots. It is a very simple Maven app, very easy to run, requires no external data or nothing.
If someone could shed any light whatsoever on this I would be extremely grateful! :slight_smile:

Hordur Th.
Efla engineers
Iceland
17493470.zip (56.5 KB)
17493473.png
17493476.png
17493479.png

I have no time to debug your code, but I have a guess that what could be your problem.

Your pages share the same GridScreen instance since it is UIScoped. This seems to work for the serverside logic, but in some cases Browser UI is not being updated.

A potential workaround could be to use AfterNavigationObserver, which calls afterNavigation(…) when you switch to the page and do somethign there, that forces the Grid to refresh.

public class GridPage extends Div implements AfterNavigationObserver {

    @Override
    public void afterNavigation(AfterNavigationEvent event) {
	    ... do something here that forces Grid to update ...
    }
}

Hi Tatu,

Thanks very much for your reply.

Actually only page 1 has a grid, page 2 has no content.
But I will try adding a AfterNavigationObserver and see if I can somehow bring the Grid back to life there.

Best regards,

Hordur

I simplified the provided example project into only a single view that doesn’t use any CDI and no template features. This is indeed a bug related to a grid instance being reused. I’ve reported it as https://github.com/vaadin/vaadin-grid-flow/issues/539.

The use of CDI is in this case indirectly a trigger. The use of @UIScoped leads to exactly that situation where the same component is detached and attached again when navigating back to the same view.

Thank you very much Leif. Hopefully this can be fixed in Vaadin 13.