Grid in a tab sheet scrolls to top on tab change

[vaadin-bot]

Originally by @tsuoanttila

---

Grid does not maintain its scroll position when changing tab sheet tabs. Grid is always scrolled to top.

---

Imported from https://dev.vaadin.com/ issue #18271

[BrianSiimAndersenEG]

Here's an example UI that shows two tabs with a grid in the first tab. If you scroll down and select eg. row 150, click on the other tab and click on the first tab again, the grid is now positioned at the top and not staying where the grid was previously scrolled to. If you scroll down you can see that the row is still selected - so only the scrolling is being lost.

@SuppressWarnings("serial")
public class GridTestUI extends UI {

    @SuppressWarnings("unchecked")
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        TabSheet tabSheet = new TabSheet();
        tabSheet.setSizeFull();

        Grid grid = new Grid();
        grid.setSizeFull();
        IndexedContainer container = new IndexedContainer();
        container.addContainerProperty("Column", String.class, "");
        for (int i = 0; i < 200; i++) {
            Item item = container.addItem(i);
            item.getItemProperty("Column").setValue(String.valueOf(i));
        }
        grid.setContainerDataSource(container);

        tabSheet.addTab(grid, "Grid");
        tabSheet.addTab(new TextField("Text field"), "Text field");

        setContent(tabSheet);
    }

    static public GridTestUI getCurrent() {
        return (GridTestUI) UI.getCurrent();
    }

    /**
     * Defines VaadinServlet config
     */
    @WebServlet(value = { "/gridtest/*" }, name = "GridTestUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = GridTestUI.class, productionMode = false)
    public static class Aspect4UIServlet extends VaadinServlet {
    }
}

[hesara]

This actually happens by design - since Vaadin 7.0, the client side state of components in a TabSheet is not preserved between tab changes to reduce memory usage and unnecessary background updates on the client side. As the scroll position is only managed on the client side, it is lost on tab change.

I'm not sure preserving the scroll position of a Grid on the server side would be a good idea in the general case as many scrolls don't otherwise require a server roundtrip if the needed rows are already cached on the client side. However, this could be addressed e.g. with an extension that would track and store the grid scroll position, or perhaps by sending the scroll position only after a delay.

[TatuLund]

Workaround available as Add-On

https://vaadin.com/directory#!addon/gridscrollextension-add-on

[mstahv]

@hesara I think we should value UX/DX more than potential performance and it should work as it did with Table previously. It saved the scroll position into the component state.

• Developer can save the position
• Developer can reset the position (if e.g. scared about performance)
• Users can go to another view, come back and continue where they were

IIRC Table saves the index of first visible column. That is "close enough" for decent UX and then required rows, which need to be sent to client, can be calculated on the server side.

[stale[bot]]

A lot of tickets have been left hanging in the issue tracker through the years. Some of them are still relevant, some of them have been fixed a long time ago and some are no longer valid. To get a better look on what is important and still relevant, we are closing old tickets which have not been touched in a long time. No further work will be done on this ticket. If the ticket seems to be still actual, please verify the problem existence over latest framework version and then open a new ticket in vaadin/framework with all the suitable information.