Hiding Grid columns via UI

Vaadin 6 / 7 / 8
1

Is anyone else experiencing problems when trying to hide Grid columns via UI (that tiny widget on the right side of the header row) with Vaadin 7.5.x (tried 7.5.2 and 7.5.3)? The hiding works correctly for me only with the first try (select one column to be hidden), after that either the selection has no effect or the Grid component is not refreshed correctly (the visible column may be missing or the column widths are messed up etc.). And after that the UI no longer works without refreshing the browser window. I know that this kind of problems can be related to not compiling widgetset with the correct Vaadin version but that’s not the case now.

In our Java code all we have done is to call setHidable(true) for the Grid columns, should we do something more for the hiding feature to work correctly? The Grid demo on Vaadin Sampler seems to work but I don’t know with which Vaadin version it has been built.

From Chrome’s JavaScript console we noticed this error message:

SEVERE: Exception caught: Exception caught: (TypeError) : Cannot set property ‘colSpan’ of undefined com.google.gwt.event.shared.UmbrellaException: Exception caught: Exception caught: (TypeError) : Cannot set property ‘colSpan’ of undefined

Tested with Chrome 44.0 and IE 10.

2

Hi Mika,

Just tested out with the latest 7.5 with a couple of different test UIs and I can’t reproduce this issue. Can you provide a simple test UI where this happens? It would speed up debugging and fixing a lot.

//Teemu

3

Even this simple UI hangs Chrome after hiding both colums and then trying to make them visible again.

@Theme("test")
public class TestUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = TestUI.class,
        widgetset = "com.example.test.widgetset.TestWidgetset")
    public static class Servlet extends VaadinServlet {
    }

    /*
     * (non-Javadoc)
     * @see com.vaadin.ui.UI#init(com.vaadin.server.VaadinRequest)
     */
    @Override
    protected void init(final VaadinRequest request) {
        buildLayout();
    }

    private void buildLayout() {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);

        Grid grid = new Grid();

        grid.setHeightMode(HeightMode.ROW);
        grid.setColumnReorderingAllowed(true);

        grid.setSelectionMode(SelectionMode.NONE);

        grid.addColumn("name", String.class);
        grid.addColumn("born", Integer.class);

        grid.addRow("Nicolaus Copernicus", 1543);
        grid.addRow("Galileo Galilei", 1564);
        grid.addRow("Johannes Kepler", 1571);
        grid.setHeightByRows(3);

        // Set columns hidable & sortable
        for (Column column : grid.getColumns()) {
            column.setHidable(true);
            column.setSortable(true);
        }

        grid.setSortOrder(Lists.newArrayList(new SortOrder("name", SortDirection.DESCENDING)));

        layout.addComponent(grid);
        setContent(layout);
    }
}

In debug mode I get this error to console:

Exception caught: (RangeError) : Maximum call stack size exceeded
   at Unknown.Hg(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Lg(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Rg(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Jx(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Mx(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.hx(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.K9c(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.T9c(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.S9c(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.$id(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.cid(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.oQb(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Vmd(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.dqb(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Ti(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.Ki(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.si(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.ri(com.example.test.widgetset.TestWidgetset-0.js)
   at Unknown.eval(com.example.test.widgetset.TestWidgetset-0.js)
4

After a quick look around the issue seems to be with the column automatic expanding. I have yet to debug where it actually fails but the calculation of the column sizes seems to break. This is indeed something that should’ve been tested and fixed already.

//Teemu

5

Well. Debugging is quite fruitful, since now I actually know the culprit. The issue is with HeightByRows fitting exactly everything. It start oscillating between needing scrollbars and not needing scrollbars. This issue comes up every now and then, and is actually quite tricky to get fixed right. It will not happen if you have more rows than your designated size (i.e. you always have a vertical scrollbar).

The issue is not trivial and I can’t solve it now. I filed a ticket for it (
https://dev.vaadin.com/ticket/18596
 ). Thank you for spotting this.

//Teemu

6

Good news! I had some extra time on my hands, and decided to take yet another look at this. Found a fix, it will be in some upcoming maintenance release.

//Teemu

7

Seems to be working with 7.5.4. Thanks for the quick fix.