Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid frozen-at-end-column position isn't refreshed correctly when Grid items change #6666

Open
OlliTietavainenVaadin opened this issue Sep 23, 2024 · 0 comments
Labels
bug Something isn't working Impact: Low Severity: Minor UX User experience issue vaadin-grid

Comments

@OlliTietavainenVaadin
Copy link
Member

Description

When you have a Grid with one or more frozen columns at the end, and the Grid displays both a vertical and a horizontal scrollbar, applying e.g. a filter to reduce the number of items can cause the vertical scrollbar to disappear. This is currently not causing a recalculation of the frozen column position, but you can trigger the calculation e.g. by moving the horizontal scrollbar a little or resizing the browser window:
filter

Expected outcome

Changing the item list should also recalculate the frozen-to-end column position if needed

Minimal reproducible example

public class HelloWorldView extends HorizontalLayout {


    public HelloWorldView() {
        setSizeFull();
        VerticalLayout layout = new VerticalLayout();
        Grid<String> grid = new Grid<>();
        List<String> letters = new ArrayList<>();
        for (char c = 'a'; c < 'z'; c++) {
            letters.add(c + "");
        }
        GridListDataView<String> stringGridListDataView = grid.setItems(letters);
        Button filterButton = new Button("Filter list");
        filterButton.addClickListener( e-> stringGridListDataView.addFilter( s -> s.equals("a")) );
        layout.add(filterButton);
        grid.addColumn(s -> "Foo").setHeader("Id");
        grid.addColumn(s -> "Bar").setHeader("First name");
        grid.addColumn(s -> "Baz").setHeader("Last name");
        grid.addColumn(s -> "Bizzle").setHeader("Birth date");
        grid.addColumn(s -> "Quux").setHeader("Phone");
        grid.addColumn(s -> "Zyzzyx").setHeader("Address");
        grid.addColumn(p ->"Eius ducimus numquam provident est. Est dolorum odit soluta quia accusamus error fugiat. Alias beatae ut maiores eos.").setHeader("Lorem");
        grid.addComponentColumn(p -> {
            Button button = new Button(LumoIcon.PHONE.create());
            button.addThemeVariants(ButtonVariant.LUMO_ICON);
            return button;
        }).setHeader("Call").setFrozenToEnd(true);
        layout.add(grid);
        add( layout);
    }

}

Steps to reproduce

  1. Resize your browser so that the Grid gains a horizontal scrollbar
  2. Click the "filter list" button
  3. Observe that the frozen column at the end is off by the width of the vertical scrollbar that is no longer there
  4. Move the horizontal scrollbar a bit
  5. Observe that the frozen column pops in the right place

Environment

Vaadin version(s): 24.4.4
OS: Windows 11

Browsers

Issue is not browser related

@yuriy-fix yuriy-fix added bug Something isn't working vaadin-grid Severity: Minor Impact: Low UX User experience issue labels Sep 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Impact: Low Severity: Minor UX User experience issue vaadin-grid
Projects
None yet
Development

No branches or pull requests

2 participants