Grid recalculateColumnWidths doesn't recalculate on first attempt

[weslowsk]

As described in this post, Grid's recalculateColumnWidths does not resize the column when clicking a button that executes that code in its click listener. Rather, it resizes the column after a second click of that button. It should resize it after the first click.

[weslowsk]

Sample code:

	public Grid2() {
		ThreeString ts1 = new ThreeString("111", "222", "333");
		ThreeString ts2 = new ThreeString("444", "555", "667");
		
		Collection<ThreeString> itemList = new ArrayList<ThreeString>();
		itemList.add(ts1);
		itemList.add(ts2);
		
		Grid<ThreeString> grid1 = new Grid<>();
		grid1.setHeightByRows(true);
		
		grid1.setItems(itemList);

		grid1.addColumn(ThreeString::getA).setHeader("First String").setSortable(true).setResizable(true)
		.setAutoWidth(true);
		grid1.addColumn(ThreeString::getB).setHeader("Second String").setSortable(true).setResizable(true)
		.setAutoWidth(true);
		grid1.addColumn(ThreeString::getC).setHeader("Third String").setSortable(true).setResizable(true)
		.setAutoWidth(true);

		add(grid1);
		
		Button button = new Button("Add Text");
		button.addClickListener(event -> {
			ts2.setB("This string became really long and it will cause the cell to grow its width and not truncate.");
			grid1.getDataProvider().refreshAll();
			grid1.recalculateColumnWidths();
		});
		
		add(button);

	}

[tarekoraby]

A rather hacky workaround involves doing the recalculation via one extra client-server round trip.

First, inside the Button click listener add:

Page page = UI.getCurrent().getPage();
page.executeJs("$0.$server.recalculateColumnWidths()",getElement());

Then add the method where the grid's recalculation would actually occur:

@ClientCallable
public void recalculateColumnWidths() {
        grid.recalculateColumnWidths();
}

[wofl]

The same seems to happen with the tree grid and expanding/collapsing nodes there. The following code will not update the column widths on the first expand of the first node but on all following (easily seen by expanding, collapsing and expanding again the root node).

public class DemoUI extends UI {
    @Theme(Lumo.class)
    @Route("")
    public static class BaseRoute extends Div {
        public BaseRoute() {
            final TreeNode root = new TreeNode("root", null);
            final TreeNode layer1 = new TreeNode("layer1 LONG STRING", root);
            final TreeNode layer2 = new TreeNode("layer2 EVEN LONGER STRING", layer1);
            final TreeGrid<TreeNode> grid = new TreeGrid<>();
            grid.setWidth("300px");
            grid.setItems(Collections.singletonList(root), TreeNode::getChildren);
            grid.addHierarchyColumn(TreeNode::getName).setAutoWidth(true).setHeader("Hierarchy");
            grid.addColumn(TreeNode::getName).setAutoWidth(true).setHeader("Name");
            grid.addExpandListener(treeNodeTreeGridExpandEvent -> grid.recalculateColumnWidths());
            grid.addCollapseListener(treeNodeTreeGridCollapseEvent -> grid.recalculateColumnWidths());
            add(grid);
        }
    }

    public static class TreeNode {
        private final String name;
        private final TreeNode parent;
        private final List<TreeNode> children = new ArrayList<>();

        public TreeNode(String name, TreeNode parent) {
            this.name = name;
            this.parent = parent;
            if (this.parent != null) {
                this.parent.addChildren(this);
            }
        }

        public void addChildren(TreeNode... nodes) {
            this.children.addAll(Arrays.asList(nodes));
        }

        public String getName() {
            return name;
        }

        public TreeNode getParent() {
            return parent;
        }

        public List<TreeNode> getChildren() {
            return children;
        }
    }
}

[TatuLund]

Just a nit pick, one should not extend UI in Vaadin 14

public class DemoUI extends UI

Corrected demo code below

@Route("grid1864")
public class Grid1864 extends Div {
    public Grid1864() {
        final TreeNode root = new TreeNode("root", null);
        final TreeNode layer1 = new TreeNode("layer1 LONG STRING", root);
        final TreeNode layer2 = new TreeNode("layer2 EVEN LONGER STRING",
                layer1);
        final TreeGrid<TreeNode> grid = new TreeGrid<>();
        grid.setWidth("300px");
        grid.setItems(Collections.singletonList(root), TreeNode::getChildren);
        grid.addHierarchyColumn(TreeNode::getName).setAutoWidth(true)
                .setHeader("Hierarchy");
        grid.addColumn(TreeNode::getName).setAutoWidth(true).setHeader("Name");
        grid.addExpandListener(
                treeNodeTreeGridExpandEvent -> grid.recalculateColumnWidths());
        grid.addCollapseListener(treeNodeTreeGridCollapseEvent -> grid
                .recalculateColumnWidths());
        add(grid);
    }

    public static class TreeNode {
        private final String name;
        private final TreeNode parent;
        private final List<TreeNode> children = new ArrayList<>();

        public TreeNode(String name, TreeNode parent) {
            this.name = name;
            this.parent = parent;
            if (this.parent != null) {
                this.parent.addChildren(this);
            }
        }

        public void addChildren(TreeNode... nodes) {
            this.children.addAll(Arrays.asList(nodes));
        }

        public String getName() {
            return name;
        }

        public TreeNode getParent() {
            return parent;
        }

        public List<TreeNode> getChildren() {
            return children;
        }
    }
}