DataGrid inside InfoWindow doesn't show table data

Question

I'm using GWT along with the GoogleMaps GWT API ( v3.8 , and no, I can't use the branflakes GoogleMaps API).

I'm trying to put a DataGrid table inside an InfoWindow on the map. I have the DataGrid working fine as long as I display it outside the map, but whenever I add a DataGrid inside an InfoWindow, none of the table rows show up:

If I right-click the InfoWindow, go to "inspect element", then trudge through the million divs that GWT creates, I can see that the data is there- it's just not visible for some reason.

I've done quite a bit of googling, but all I've seen is that a DataGrid has to be a child of a LayoutPanel or ScrollPanel. But that's exactly what I'm doing:

package com.test.client;

import java.util.Arrays;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.InfoWindow;
import com.google.maps.gwt.client.InfoWindowOptions;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;

public class GwtTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
        options.setOtherParms("sensor=false");
        Runnable callback = new Runnable() {
            public void run() {
                createMap();
            }
        };
        AjaxLoader.loadApi("maps", "3", callback, options);

        //this works
        DataGrid dg = createTable();
        RootPanel.get("tableDiv").add(new ScrollPanel(dg));
    }

    public void createMap() {

        MapOptions mapOpts = MapOptions.create();
        mapOpts.setZoom(4);
        mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
        mapOpts.setMapTypeId(MapTypeId.TERRAIN);
        mapOpts.setStreetViewControl(false);

        GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);

        DataGrid dg = createTable();

        InfoWindowOptions iwo = InfoWindowOptions.create();
        iwo.setPosition(LatLng.create(37.09024, -95.712891));
        iwo.setContent(new ScrollPanel(dg).getElement());

        InfoWindow infoWindow = InfoWindow.create(iwo);
        infoWindow.open(map);
    }

    public DataGrid createTable(){
        Column columnA = new Column(new TextCell()){
            public Object getValue(Object object) {
                return "one";
            }
        };

        Column columnB = new Column(new TextCell()){
            public Object getValue(Object object) {
                return "two";
            }
        };

        Column columnC = new Column(new TextCell()){
            public Object getValue(Object object) {
                return "three";
            }
        };

        DataGrid dataGrid = new DataGrid();
        dataGrid.addColumn(columnA, "A");
        dataGrid.addColumn(columnB, "B");
        dataGrid.addColumn(columnC, "C");

        dataGrid.setRowCount(1);
        dataGrid.setRowData(Arrays.asList("one", "two", "three"));

        dataGrid.setWidth("200px");
        dataGrid.setHeight("100px");

        return dataGrid;
    }
}

Is there some step I'm missing? How can I get a DataGrid to properly display inside an InfoWindow using the GoogleMaps API?

Edit: After not receiving any answers, I've crossposted this question to the GWT discussion board here .

Answer 1

If anybody else comes across this problem, I ended up just using a CellTable instead:

package com.test.client;

import java.util.Arrays;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.InfoWindow;
import com.google.maps.gwt.client.InfoWindowOptions;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;

public class GwtTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
        options.setOtherParms("sensor=false");
        Runnable callback = new Runnable() {
            public void run() {
                createMap();
            }
        };
        AjaxLoader.loadApi("maps", "3", callback, options);

        //this works
        CellTable dg = createTable();
        RootPanel.get("tableDiv").add(new ScrollPanel(dg));
    }

    public void createMap() {

        MapOptions mapOpts = MapOptions.create();
        mapOpts.setZoom(4);
        mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
        mapOpts.setMapTypeId(MapTypeId.TERRAIN);
        mapOpts.setStreetViewControl(false);

        GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);

        CellTable dg = createTable();


        InfoWindowOptions iwo = InfoWindowOptions.create();
        iwo.setPosition(LatLng.create(37.09024, -95.712891));
        iwo.setContent(dg.getElement());

        InfoWindow infoWindow = InfoWindow.create(iwo);
        infoWindow.open(map);

    }

    public CellTable createTable(){
        Column columnA = new Column(new TextCell()){

            @Override
            public Object getValue(Object object) {
                return "one";
            }

        };

        Column columnB = new Column(new TextCell()){

            @Override
            public Object getValue(Object object) {
                return "two";
            }

        };

        Column columnC = new Column(new TextCell()){

            @Override
            public Object getValue(Object object) {
                return "three";
            }

        };

        CellTable dataGrid = new CellTable();
        dataGrid.addColumn(columnA, "A");
        dataGrid.addColumn(columnB, "B");
        dataGrid.addColumn(columnC, "C");

        dataGrid.setRowCount(1);
        dataGrid.setRowData(Arrays.asList("one", "two", "three"));

        dataGrid.setWidth("200px");
        dataGrid.setHeight("100px");

        return dataGrid;
    }
}

Answer 2

You need to use RootLayoutPanel in onModuleLoad instead of RootPanel. There need to be layout panels all the way from the root to the DataGrid. InfoWindow doesn't seem to be a layout panel, so you might need to hook up the resizing yourself, see:

http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#Resize

Furthermore, you put the DataGrid inside a scrollpanel. You can do that but then you have to give it an explicit size. DataGrid has its own scrollpanel so you can probably also get rid of the explicitly created one.