Question

Upgrading from GWT 2.3 to 2.4 caused a client-side exception in a class of mine that extends CellTable. There has been no loss of functionality, but the exception is a constant development annoyance.

com.google.gwt.core.client.JavaScriptException: (TypeError): this.insertBefore is not a function

I’ve identified the line that causes this, though the exception doesn’t get thrown until the table is rendering later. In a row change handler, MyCellTable removes the header Element when there are no rows in the CellTable. Here’s some example code that causes the exception in 2.4, but not in 2.3.

CellTable<String> table = new CellTable<String>();

table.addColumn(new TextColumn<String>() {
        @Override
        public String getValue(String object) {
            return object;
        }
    }, "Col");

List<String> list = new ArrayList<String>();
list.add("abc");
list.add("def");
table.setRowData(list);

NodeList<Element> els = table.getElement().getElementsByTagName("THEAD");
if (els.getLength() == 0) {
    return;
}

final Element e = els.getItem(0);
e.removeFromParent();

Downgrading to GWT 2.3 fixes the problem. I tried calling headerElement.setAttribute(“style”, “display: none”) instead of removing the element, but that doesn’t look the same (it still keeps a few pixels there). I’m aware that creating a CellTable and then ripping out pieces of it is probably a bad practice.

Are there any known changes in GWT 2.4 that could be causing this problem? Can anyone think of a workaround?

Answer 1

You can achieve the same result (hiding the header) by using the CSS property: “display: none” on the “thead” css attribute of the celltable.

Here’s how:

1. Create a css file with the following entry in it:

Globalstyles.css:

    .hiddenHeader thead {
        display: none;
    }

2. Add this file to a client resource bundle:

GlobalResources.java

    public interface GlobalResources extends ClientBundle {
        public static final GlobalResources RESOURCE =  GWT.create(GlobalResources.class);

        @Source("GlobalStyles.css")
        GlobalStylesheet styles();

    }

3. In your code, you can programatically set the style when there are no rows:

    cellTable.addStyleName(GlobalResources.RESOURCE.styles().hiddenHeader());

And to remove the style call this:

    cellTable.removeStyleName(GlobalResources.RESOURCE.styles().hiddenHeader());

Done!