PDA

View Full Version : Grid rows not rendered after Grid.reconfigure() in IE



s1m55r
18 May 2010, 3:34 AM
I am facing a very weird problem only in Internet Explorer. My application contains a grid which displays data dynamically loaded from the server. For various reasons, I cannot use LiveGrid or paging grid etc. but have to rely on loading the data explicitly and then reconfiguring the grid with the modified list store each time. The grid contains two columns, the first is a SimplePanel with a single GWT Image (com.google.gwt.user.client.ui.Image) element while the second column contains a GWT Label.

Before:20557
After: 20558

When I load up the application, the grid displays correctly as can be seen in the first attachment. However, when I perform some action that triggers a call to Grid.reconfigure(), the grid rows shrink to about 5 pixels in size and the row contents become invisible. On examination of the HTML source, we can see that the img tag and the label text are not added to the body after the reconfigure call.

Before:20556
After: 20555

The same application runs perfectly fine in all other browsers - Firefox, Chrome, Safari and Opera. I also tried to explicitly call GridView.refresh and LayoutContainer.layout on the containing panel after Grid.reconfigure but it made no difference. I am not creating a new ListStore each time but simply clearing the contents and populating it with the new data.

Can someone please provide any suggestions as to why this might be happening or any way to resolve this. Thank you.

Update: The problem does not occur if instead of clearing the list store, I create a new instance and then populate and reconfigure the grid.

jay@moduscreate.com
19 May 2010, 7:19 PM
Moved to Gxt Help

apkin
19 May 2010, 11:03 PM
Hi,

I am facing a similar issue. I have a grid which contains a column which has a gwt label inside it.
When I click on header to sort the column the labels inside the column don't get rendered in IE8 and IE7.
It works well with chrome and firefox.

I was facing the same issue when I was reconfiguring the grid myself. But when I passed a new store to it, it was working in IE. So do I need to do similar thing(passing a new store on header click) here too?

Or am I missing out something basic?

Thanks,
Anuprit

s1m55r
25 May 2010, 3:38 AM
Any updates on this issue? Its extremely frustrating to see the grid working extremely well in all the other browsers and then see the contents just disappear in IE. Recreating the list store before calling grid.reconfigure causes other problems and anyways, I cannot use this workaround when the grid is reconfigured or GridView refreshed internally from within the code, such as when the grid is sorted by some column etc.

I dug a bit deeper into the code and made the following observations regarding how a GWT Label widget added to some column through a renderer is mutating before actually being rendered:

Before sorting the grid, the HTML for the GWT Label is "<DIV class=gwt-Label title=Sameer>Sameer</DIV>" at all stages with an __listener attribute being added in the actual HTML code. After I sort the grid, the GWT labels in all rows disappear while the Label widget goes through the following stages:


GridView.getRenderedValue - <DIV class=gwt-Label title=Sameer __listener="null">Sameer</DIV>
GridCellRenderer.render - <DIV class=gwt-Label title=Sameer __listener="null">Sameer</DIV>
GridView.renderWidgets - <DIV class=gwt-Label title=Sameer __listener="null"></DIV>
Actual HTML - <div title="Extn5317" class="gwt-Label" __listener="<DIV class=gwt-Label title=Extn5317></DIV>"/>

Somehow, the contents of the Label's DIV tag are dropped somewhere between GridCellRenderer.render and GridView.renderWidgets, that too only in IE.

Please offer suggestions on why this might be happening and how to go about resolving this. I will be grateful for any help on this issue. Thank you.

Regards,
Sameer

sven
25 May 2010, 3:45 AM
Before calling something an issue and waiting for an aswer. Why dont use simple post a testcase that implements EntryPoint and shows your problem?

s1m55r
25 May 2010, 5:24 AM
My bad. Here's a working example of the scenario I'm referring to. Remember to add a div to your HTML file with the ID testContainer where the content panel gets added. Open the example in IE and try sorting by the Index column.



package com.test.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

class TestElement extends BaseModel {
public TestElement(int index, final String name, final String phone) {
Button button = new Button(name, new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Window.alert("Clicked " + name);
}
});

Label label = new Label(phone);
label.setText(phone);
label.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Dialled " + phone);
}
});

set("index", index);
set("button", button);
set("label", label);
}
}

public class TestGrid implements EntryPoint {
public void onModuleLoad() {
ColumnConfig indexCol = new ColumnConfig("index", "Index", 50);

ColumnConfig nameCol = new ColumnConfig("button", "Button", 300);
nameCol.setRenderer(new GridCellRenderer<ModelData>() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
return (Button) model.get(property);
}});

ColumnConfig labelCol = new ColumnConfig("label", "Label", 200);
labelCol.setRenderer(new GridCellRenderer<ModelData>() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
return (Label) model.get(property);
}});

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(indexCol);
columns.add(nameCol);
columns.add(labelCol);

ColumnModel cm = new ColumnModel(columns);
ListStore<TestElement> store = populateElements();

Grid<TestElement> grid = new Grid<TestElement>(store, cm);
grid.setAutoExpandColumn("button");

ContentPanel cp = new ContentPanel(new FitLayout());
cp.setSize(600, 400);
cp.add(grid);
RootPanel.get("testContainer").add(cp);
}

private ListStore<TestElement> populateElements() {
ListStore<TestElement> list = new ListStore<TestElement>();
list.add(new TestElement(1, "abcd", "1234"));
list.add(new TestElement(2, "efgh", "5678"));
list.add(new TestElement(3, "ijkl", "9012"));
list.add(new TestElement(4, "mnop", "3456"));
list.add(new TestElement(5, "qrst", "7890"));
list.add(new TestElement(6, "uvwx", "1234"));
list.add(new TestElement(7, "yzab", "5678"));
list.add(new TestElement(8, "cdef", "9012"));
list.add(new TestElement(9, "ghij", "3456"));
list.add(new TestElement(10, "klmn", "7890"));
list.add(new TestElement(11, "opqr", "1234"));
list.add(new TestElement(12, "stuv", "5678"));
list.add(new TestElement(13, "wxyz", "9012"));
return list;
}
}