DataGrid, Activity/Place don't work on IE7

230 views
Skip to first unread message

Juan Pablo Gardella

unread,
Nov 15, 2011, 11:48:27 PM11/15/11
to google-we...@googlegroups.com
Hi folks!

I spent hours to try to resolve an error that only happen in IE7. In IE9, Chome and Firefox works fine, so I think perhaps is a bug. Is related with DataGrid and change places.
The error happen when you change via placeController.goTo(place) to a place where I have a datagrid.

I make a sample to reproduce, it have 2 places, a default place and another place. I put in the sample a menu with an option to go to the second place. If you start the application (mvn jetty:deploy-war) you put in the browser the next URL: http://localhost:8080/myapp-web/ to start the application.

Then click View with Datagrid -> Go to place in menu to go to the place where have the datagrid. If press the link, in the url show http://localhost:8080/myapp-web/#ConsultarDDJJPlace: but nothing show. If refresh the page the datagrid shows. Same steps in another browser show the datagrid, so I suppose is a bug. IE7 doesn't show an error.

I attach the sample. It doesn't have any dependency, only GWT 2.4. To run do mvn package the first time, then mvn jetty:deploy-war. 

Can someone help me with this error? I try and I can't see what happen, becouse it works when refresh or start the application with: http://localhost:8080/myapp-web/#ConsultarDDJJPlace

I put relevant code:

1) Presenter
public class Presenter extends AbstractActivity {

public interface Display extends IsWidget {
DataGrid<String> getResultTable();
}

private final Display vista;

public ConsultarDDJJPresenter(Display vista) {
this.vista = vista;
}

@Override
public void start(final AcceptsOneWidget panel, EventBus eventBus) {
configurarColumnasDeTabla();
panel.setWidget(vista.asWidget());
}

private void configurarColumnasDeTabla() {
TextColumn<String> id = new TextColumn<String>() {
@Override
public String getValue(String s) {
return s;
}
};
vista.getResultTable().addColumn(id, "col");

}

View:
public class ConsultarDDJJVista extends Composite implements Display {

interface DeclaracionesJuradasListaUiBinder extends
UiBinder<Widget, ConsultarDDJJVista> {
}

private static DeclaracionesJuradasListaUiBinder uiBinder = GWT
.create(DeclaracionesJuradasListaUiBinder.class);

@UiField(provided = true)
final DataGrid<String> resultTable = new DataGrid<String>();

public ConsultarDDJJVista() {
initWidget(uiBinder.createAndBindUi(this));
}
public DataGrid<String> getResultTable() {
return resultTable;
}
}

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:c="urn:import:com.google.gwt.user.cellview.client">
<ui:style>
.grid {
height: 450px;
}
</ui:style>
<g:VerticalPanel addStyleNames='mainPanel'>
<g:DockLayoutPanel unit="PX" addStyleNames="{style.grid}" >
<g:center>
<c:DataGrid ui:field="resultTable" />
</g:center>
</g:DockLayoutPanel>
</g:VerticalPanel>
</ui:UiBinder> 


PD: Sorry my english.


Juan Pablo Gardella

unread,
Nov 15, 2011, 11:50:15 PM11/15/11
to google-we...@googlegroups.com
I've forgotten attach the sample. Here is.

2011/11/15 Juan Pablo Gardella <gardella...@gmail.com>
datagrid.zip

Juan Pablo Gardella

unread,
Nov 16, 2011, 6:14:09 AM11/16/11
to google-we...@googlegroups.com
Anyone?

2011/11/15 Juan Pablo Gardella <gardella...@gmail.com>
Hi folks!

Juan Pablo Gardella

unread,
Nov 16, 2011, 8:26:40 AM11/16/11
to Google Web Toolkit
I open an issue. http://code.google.com/p/google-web-toolkit/issues/detail?id=6996



On 16 nov, 04:14, Juan Pablo Gardella <gardellajuanpa...@gmail.com>
wrote:
> Anyone?
>
> 2011/11/15 Juan Pablo Gardella <gardellajuanpa...@gmail.com>
>
>
>
>
>
>
>
> > Hi folks!
>
> > I spent hours to try to resolve an error that only happen in IE7. In IE9,
> > Chome and Firefox works fine, so I think perhaps is a bug. Is related with
> > DataGrid and change places.
> > The error happen when you change via placeController.goTo(place) to a
> > place where I have a datagrid.
>
> > I make a sample to reproduce, it have 2 places, a default place and
> > another place. I put in the sample a menu with an option to go to the
> > second place. If you start the application (mvn jetty:deploy-war) you put
> > in the browser the next URL:http://localhost:8080/myapp-web/to start

David

unread,
Nov 17, 2011, 11:51:15 AM11/17/11
to Google Web Toolkit
Is it an Activy/Place , a uib , or a datagrid problem?

Try debugging to see if presenter 'star't method is invoked . Also
put in title or some other indication that the uib template is being
rendered.
It also looks like you'll be adding an additional column on each
visit
David




On Nov 16, 8:26 am, Juan Pablo Gardella <gardellajuanpa...@gmail.com>
wrote:
> I open an issue.http://code.google.com/p/google-web-toolkit/issues/detail?id=6996
>
> On 16 nov, 04:14, Juan Pablo Gardella <gardellajuanpa...@gmail.com>
> wrote:
>
>
>
>
>
>
>
> > Anyone?
>
> > 2011/11/15 Juan Pablo Gardella <gardellajuanpa...@gmail.com>
>
> > > Hi folks!
>
> > > I spent hours to try to resolve an error that only happen in IE7. In IE9,
> > > Chome and Firefox works fine, so I think perhaps is a bug. Is related with
> > > DataGrid and change places.
> > > The error happen when you change via placeController.goTo(place) to a
> > > place where I have a datagrid.
>
> > > I make a sample to reproduce, it have 2 places, a default place and
> > > another place. I put in the sample a menu with an option to go to the
> > > second place. If you start the application (mvn jetty:deploy-war) you put
> > > in the browser the next URL:http://localhost:8080/myapp-web/tostart
> > > the application.
>
> > > Then click View with Datagrid -> Go to place in menu to go to the place
> > > where have the datagrid. If press the link, in the url show
> > >http://localhost:8080/myapp-web/#ConsultarDDJJPlace:butnothing show. If

Thomas Broyer

unread,
Nov 17, 2011, 12:02:19 PM11/17/11
to google-we...@googlegroups.com
Looks to me like it could be an issue with your DockLayoutPanel not having a fixed size and not put within a ProvidesResize (and BTW, use height="450px" on your <g:DockLayoutPanel> rather than using CSS; as a rule of thumb, with GWT, do not use CSS for sizing, and more generally for layout; unless you're doing your layout yourself –using divs and SimplePanel/FlowPanels and the like–).
For some reason, the DockLayoutPanel could figure out its dimensions on a "fresh load", but not when navigation from a previous activity.
Just an idea; maybe not your issue, but definitely something to fix in your code at some point.

Juan Pablo Gardella

unread,
Nov 17, 2011, 1:17:01 PM11/17/11
to google-we...@googlegroups.com
Hi David,

Thanks for your time. Yes the activity was called. The sample works on IE9, Firefox and Chrome, but not in IE7.

Best regards,
Juan

2011/11/17 David <lev...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Juan Pablo Gardella

unread,
Nov 17, 2011, 1:19:39 PM11/17/11
to google-we...@googlegroups.com
Thanks Thomas for your tips! But using height="450px" don't resolve the error. It continues. I will upload to youtube a video to show the error.

I don't know if is my code, becouse it runs on other browser. I think is a bug, becouse I test all ways but don't find the cause. Perhaps is DockLayoutPanel and the size as you said.

Thanks,
Juan

2011/11/17 Thomas Broyer <t.br...@gmail.com>
Looks to me like it could be an issue with your DockLayoutPanel not having a fixed size and not put within a ProvidesResize (and BTW, use height="450px" on your <g:DockLayoutPanel> rather than using CSS; as a rule of thumb, with GWT, do not use CSS for sizing, and more generally for layout; unless you're doing your layout yourself –using divs and SimplePanel/FlowPanels and the like–).
For some reason, the DockLayoutPanel could figure out its dimensions on a "fresh load", but not when navigation from a previous activity.
Just an idea; maybe not your issue, but definitely something to fix in your code at some point.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Juan Pablo Gardella

unread,
Nov 17, 2011, 1:28:17 PM11/17/11
to google-we...@googlegroups.com
I upload the sample to bitbucket to browse the sources: https://bitbucket.org/gardellajuanpablo/bugie7gwt/src

Thanks for your time.

2011/11/17 Juan Pablo Gardella <gardella...@gmail.com>

Thomas Broyer

unread,
Nov 17, 2011, 2:32:58 PM11/17/11
to google-we...@googlegroups.com
As a quick and easy test, try setting an explicit height *and* width. If it indeed is the issue, then you'll have to either live with it, or put your DockLayoutPanel within a ProvidesResize widget (because DockLayoutPanel RequiresResize), possibly a ResizeLayoutPanel.

Juan Pablo Gardella

unread,
Nov 17, 2011, 10:38:41 PM11/17/11
to google-we...@googlegroups.com
Hi,

I replace the view from:

<g:VerticalPanel addStyleNames='mainPanel'>
<g:DockLayoutPanel unit="PX" addStyleNames="{style.grid}" >
<g:center>
<c:DataGrid ui:field="resultTable" />
</g:center>
</g:DockLayoutPanel>
</g:VerticalPanel>

to:

<g:VerticalPanel addStyleNames='mainPanel'>
<g:DockLayoutPanel unit="PX" addStyleNames="{style.grid}" >
<g:center>
<g:Label text="Hi"></g:Label>
</g:center>
</g:DockLayoutPanel>
</g:VerticalPanel>

And the label is showing in IE7, so I assume that DockLayoutPanel is not the problem. So, Why datagrid is don't showing in IE7 and yes in other browser (inclusive IE9)?. I will simplify the sample to reproduce the error.

I try setting height and width but don't work on IE7. 

Thanks for your time,
Juan



2011/11/17 Thomas Broyer <t.br...@gmail.com>
As a quick and easy test, try setting an explicit height *and* width. If it indeed is the issue, then you'll have to either live with it, or put your DockLayoutPanel within a ProvidesResize widget (because DockLayoutPanel RequiresResize), possibly a ResizeLayoutPanel.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Juan Pablo Gardella

unread,
Nov 17, 2011, 11:41:58 PM11/17/11
to google-we...@googlegroups.com
Hi folks,

I reduce the sample and upload a video to see the error: http://www.youtube.com/watch?v=mDYqlB3h6-4. In first browser (FF8) you see that the datagrid shows, then on IE7 no. But, when I refresh the datagrid is showing. Is crazy.

I use at now, at top pane RootLayoutPanel, but the error persist. So I think is a bug related in Datagrid and IE7 and not related to DockLayoutPanel. I define height and width.

Can help me? 

Thanks,
Juan

2011/11/17 Juan Pablo Gardella <gardella...@gmail.com>
Hi,

Thomas Broyer

unread,
Nov 18, 2011, 5:29:30 AM11/18/11
to google-we...@googlegroups.com
Does the Showcase work in IE7? http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid
If it does, then it's not an issue with "DataGrid in IE7", but how you're using it in your app.

(also, note that using RootLayoutPanel is not enough if you don't have RequiresResize/ProvidesResize widgets all the way down to your DataGrid: in the sample code you posted, you have a VerticalPanel which breaks the chain; but it's not the issue, as you explicitly set the width and height of the DockLayoutPanel).

I'm sorry I don't have time to download/build/test your sample project, and don't have an IE7 at hand either.

What I'd do:
 - try removing the DockLayoutPanel (setting explicit dimensions on the DataGrid instead)
 - set breakpoints within DataGrid (onResize, setSize and similar)
 - add logs (window.alert, GWT.log, or java.util.logging) of the DataGrid dimensions (and/or explore the DOM using the IE Developer Toolbar); beware that layout panels handle resize in a Scheduler#scheduleFinally, so defer your logging a bit; don't do it straight in your start() method.

Juan Pablo Gardella

unread,
Nov 18, 2011, 6:31:47 AM11/18/11
to google-we...@googlegroups.com
Thanks again Thomas! I'll try your suggestions.

Juan


2011/11/18 Thomas Broyer <t.br...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Juan Pablo Gardella

unread,
Nov 18, 2011, 6:55:23 AM11/18/11
to google-we...@googlegroups.com
Well some news:

- Showcase work on IE7.

- If I removing the DockLayoutPanel (setting explicit dimensions on the DataGrid instead):

DON'T WORK
    <g:VerticalPanel addStyleNames='mainPanel'>
        <g:DockLayoutPanel unit="PX" height="450px" width="700px">

            <g:center>
                <c:DataGrid ui:field="resultTable" />
            </g:center>
        </g:DockLayoutPanel>
    </g:VerticalPanel>

WORKS:
             <c:DataGrid ui:field="resultTable" height="450px" width="700px"/>

So, it seems datagrid inside dockpanel doesn't work well on IE7.

I'll continue with more tests.. Thanks Thomas


Works. So in IE7, you can't put Datagrid

2011/11/18 Juan Pablo Gardella <gardella...@gmail.com>

Raphael André Bauer

unread,
Nov 18, 2011, 7:02:10 AM11/18/11
to google-we...@googlegroups.com
On Fri, Nov 18, 2011 at 12:55 PM, Juan Pablo Gardella
<gardella...@gmail.com> wrote:
> Well some news:
>
> - Showcase work on IE7.
>
> - If I removing the DockLayoutPanel (setting explicit dimensions on the
> DataGrid instead):
>
> DON'T WORK
>     <g:VerticalPanel addStyleNames='mainPanel'>
>         <g:DockLayoutPanel unit="PX" height="450px" width="700px">
>             <g:center>
>                 <c:DataGrid ui:field="resultTable" />
>             </g:center>
>         </g:DockLayoutPanel>
>     </g:VerticalPanel>
>
> WORKS:
>              <c:DataGrid ui:field="resultTable" height="450px"
> width="700px"/>
>
> So, it seems datagrid inside dockpanel doesn't work well on IE7.
>
> I'll continue with more tests.. Thanks Thomas

The problem is almost certainly your VerticalPanel (Thomas already
pointed that out). But I am not sure if setting the height and width
will remediate things...

Can you try to remove the VerticalPanel and check if it works?

Eg try that:

        <g:DockLayoutPanel unit="PX" height="450px" width="700px">
            <g:center>
                <c:DataGrid ui:field="resultTable" />
            </g:center>>         </g:DockLayoutPanel>


Best,


Raphael

Juan Pablo Gardella

unread,
Nov 18, 2011, 7:11:10 AM11/18/11
to google-we...@googlegroups.com
Nop :( don't work. I can't understand why inside DockLayoutPanel the grid doesn't display. If I put another widget (for ex. a Label) it shows.

In showcase use DockLayoutPanel, but use different layout. It's have rigth panel and left panel. I use only one main panel. I want discover why don't work.


Thanks for your time,
Juan

2011/11/18 Raphael André Bauer <raphael.a...@gmail.com>
--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Juan Pablo Gardella

unread,
Nov 21, 2011, 1:34:10 PM11/21/11
to google-we...@googlegroups.com
Hi folks,

If I change height using  IE Developer Toolbar, the Datagrid is show. For example I change 300px to 301px and works. It seems that the tree DOM don't update or refresh correctly. It is possible to refresh tree DOM where is define the Datagrid via a button to test if this is the problem?

Juan


2011/11/18 Thomas Broyer <t.br...@gmail.com>
Does the Showcase work in IE7? http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

Juan Pablo Gardella

unread,
Nov 21, 2011, 2:24:09 PM11/21/11
to google-we...@googlegroups.com
Well, after a lot of hours I can make a workaround. If I refresh the panel that envolve the datagrid it shows. The relevant code:

View: I bind the panel, so I can manipulate in the presenter
<g:DockLayoutPanel ui:field="panel" width="300px" height="300px">

<g:center>
<c:DataGrid ui:field="resultTable" />
</g:center>

</g:DockLayoutPanel>

Presenter:

          @Override
public void start(final AcceptsOneWidget panel, EventBus eventBus) {
[...]
panel.setWidget(vista.asWidget());
Scheduler.get().scheduleDeferred(new ScheduledCommand() {

@Override
public void execute() {
String width = DOM.getElementAttribute(vista.getPanel()
.getElement(), "width");
vista.getPanel().setWidth(width);
}
});
}

Thanks for your tips. Hope helps to another with same issue.

Juan.


2011/11/21 Juan Pablo Gardella <gardella...@gmail.com>
Reply all
Reply to author
Forward
0 new messages