Grid does not render - only border is shown.

[jarik_bsu]

Hello.
Last few months we have a problem with Grids. Grid sometimes does not appears after data is loaded. Only border is shown. See screen shot. Browser IE8.
23963
instead of
23961

But the data is on page! And the grid will appear properly if user resizes the window!

This is the HTML code of the current chapter of page:

<DIV class="x-panel-bwrap">
<DIV style="BACKGROUND: none transparent scroll repeat 0% 0%" class="x-panel-body x-panel-body-noheader">
<FORM style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; OVERFLOW: hidden; PADDING-TOP: 10px" class=" x-form-label-left" method="get" action="javascript:;" target="gxt.formpanel-38" __eventBits="49152">
<DIV style="POSITION: relative; BORDER-RIGHT-WIDTH: 1px; MARGIN: 0px 0px 5px; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px" id="x-auto-599" class=" x-grid-panel x-component x-border " __eventBits="255" unselectable="">
<DIV style="WIDTH: 724px" class="x-grid3">
<DIV class="x-grid3-viewport">
<DIV class="x-grid3-header">
<DIV style="WIDTH: 724px" class="x-grid3-header-inner">
<DIV class="x-grid3-header-offset">
<DIV style="WIDTH: 725px" class="x-grid3-hh">
<TABLE style="WIDTH: 723px" id="x-auto-612" class=" x-component x-unselectable" cellSpacing="0" cellPadding="0" unselectable="on">
<COLGROUP><COL /></COLGROUP>
<TBODY>
<TR class="x-grid3-hd-row">
<TD style="WIDTH: 78px" class="x-grid3-header x-grid3-hd x-grid3-cell x-grid3-td-accountId" _nodup="30819">
<DIV style="WIDTH: 68px; HEIGHT: 14px" id="x-auto-601" class=" x-grid3-hd-inner x-grid3-hd-accountId x-component" __eventBits="125" __uiObjectID="0">
<A class="x-grid3-hd-btn" href="#"></A><SPAN id="x-auto-600" class=" x-component">Account ID</SPAN><IMG class="x-grid3-sort-icon" src="http://demo.biweekly.com:9081/ppp/com.eac.moneylogic.gwt.Home/clear.gif" width="0" height="0" />
</DIV>
</TD>
<TD style="WIDTH: 78px" class="x-grid3-header x-grid3-hd x-grid3-cell x-grid3-td-loanType.name" _nodup="30819">
<DIV style="WIDTH: 68px; HEIGHT: 14px" id="x-auto-603" class=" x-grid3-hd-inner x-grid3-hd-loanType.name x-component" __eventBits="125" __uiObjectID="1">
<A class="x-grid3-hd-btn" href="#"></A><SPAN id="x-auto-602" class=" x-component">Loan Type</SPAN><IMG class="x-grid3-sort-icon" src="http://demo.biweekly.com:9081/ppp/com.eac.moneylogic.gwt.Home/clear.gif" width="0" height="0" />
</DIV>
</TD>
<TD style="WIDTH: 168px" class="x-grid3-header x-grid3-hd x-grid3-cell x-grid3-td-lender.lenderName" _nodup="30819">
<DIV style="WIDTH: 158px; HEIGHT: 14px" id="x-auto-605" class=" x-grid3-hd-inner x-grid3-hd-lender.lenderName x-component" __eventBits="125" __uiObjectID="2">
<A class="x-grid3-hd-btn" href="#"></A><SPAN id="x-auto-604" class=" x-component">Lender Name</SPAN><IMG class="x-grid3-sort-icon" src="http://demo.biweekly.com:9081/ppp/com.eac.moneylogic.gwt.Home/clear.gif" width="0" height="0" />
</DIV>
</TD>
<TD style="WIDTH: 95px" class="x-grid3-header x-grid3-hd x-grid3-cell x-grid3-td-lender.loanAccountNumber" _nodup="30819">
<DIV style="WIDTH: 85px; HEIGHT: 14px" id="x-auto-607" class=" x-grid3-hd-inner x-grid3-hd-lender.loanAccountNumber x-component" __eventBits="125" __uiObjectID="3">
<A class="x-grid3-hd-btn" href="#"></A><SPAN id="x-auto-606" class=" x-component">Loan Number</SPAN><IMG class="x-grid3-sort-icon" src="http://demo.biweekly.com:9081/ppp/com.eac.moneylogic.gwt.Home/clear.gif" width="0" height="0" />
</DIV>
</TD>
<TD style="WIDTH: 123px" class="x-grid3-header x-grid3-hd x-grid3-cell x-grid3-td-totalPayment" _nodup="30819">
<DIV style="WIDTH: 113px; HEIGHT: 14px" id="x-auto-609" class=" x-grid3-hd-inner x-grid3-hd-totalPayment x-component" __eventBits="125" __uiObjectID="4">
<A class="x-grid3-hd-btn" href="#"></A><SPAN id="x-auto-608" class=" x-component">Payment Amount</SPAN><IMG class="x-grid3-sort-icon" src="http://demo.biweekly.com:9081/ppp/com.eac.moneylogic.gwt.Home/clear.gif" width="0" height="0" />
</DIV>
</TD>
<TD style="WIDTH: 180px" class="x-grid3-header x-grid3-hd x-grid3-cell x-grid3-td-nextPaymentDate" _nodup="30819">
<DIV style="WIDTH: 170px; HEIGHT: 14px" id="x-auto-611" class=" x-grid3-hd-inner x-grid3-hd-nextPaymentDate x-component" __eventBits="125" __uiObjectID="5">
<A class="x-grid3-hd-btn" href="#"></A><SPAN id="x-auto-610" class=" x-component">Next Payment</SPAN><IMG class="x-grid3-sort-icon" src="http://demo.biweekly.com:9081/ppp/com.eac.moneylogic.gwt.Home/clear.gif" width="0" height="0" />
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
</DIV>
<DIV class="x-clear">
</DIV>
</DIV>
<DIV style="OVERFLOW-X: hidden; WIDTH: 724px" class="x-grid3-scroller" __eventBits="16384">
<DIV class="x-grid3-body">
<DIV style="WIDTH: 722px" class="x-grid3-row x-unselectable-single x-grid3-row-collapsed" rowIndex="0">
<TABLE style="WIDTH: 722px" class="x-grid3-row-table" border="0" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD style="WIDTH: 76px" class="x-grid3-col x-grid3-cell x-grid3-td-accountId x-grid-cell-first ">
<DIV class="x-grid3-cell-inner x-grid3-col-accountId" unselectable="on">
249416
</DIV>
</TD>
<TD style="WIDTH: 76px" class="x-grid3-col x-grid3-cell x-grid3-td-loanType.name ">
<DIV class="x-grid3-cell-inner x-grid3-col-loanType.name" unselectable="on">
Auto
</DIV>
</TD>
<TD style="WIDTH: 166px" class="x-grid3-col x-grid3-cell x-grid3-td-lender.lenderName ">
<DIV class="x-grid3-cell-inner x-grid3-col-lender.lenderName" unselectable="on">
</DIV>
</TD>
<TD style="WIDTH: 93px" class="x-grid3-col x-grid3-cell x-grid3-td-lender.loanAccountNumber ">
<DIV class="x-grid3-cell-inner x-grid3-col-lender.loanAccountNumber" unselectable="on">
...9645
</DIV>
</TD>
<TD style="WIDTH: 121px" class="x-grid3-col x-grid3-cell x-grid3-td-totalPayment ">
<DIV class="x-grid3-cell-inner x-grid3-col-totalPayment" unselectable="on">
$496.00
</DIV>
</TD>
<TD style="WIDTH: 178px" class="x-grid3-col x-grid3-cell x-grid3-td-nextPaymentDate x-grid3-cell-last ">
<DIV class="x-grid3-cell-inner x-grid3-col-nextPaymentDate" unselectable="on">
09/15/10
</DIV>
</TD>
</TR>
<TR class="x-grid3-row-body-tr">
<TD class="x-grid3-body-cell" colSpan="6">
<DIV class="x-grid3-row-body">
${body}
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV style="WIDTH: 722px" class="x-grid3-row x-unselectable-single x-grid3-row-collapsed" rowIndex="1">
<TABLE style="WIDTH: 722px" class="x-grid3-row-table" border="0" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD style="WIDTH: 76px" class="x-grid3-col x-grid3-cell x-grid3-td-accountId x-grid-cell-first ">
<DIV class="x-grid3-cell-inner x-grid3-col-accountId" unselectable="on">
249415
</DIV>
</TD>
<TD style="WIDTH: 76px" class="x-grid3-col x-grid3-cell x-grid3-td-loanType.name ">
<DIV class="x-grid3-cell-inner x-grid3-col-loanType.name" unselectable="on">
Mortgage
</DIV>
</TD>
<TD style="WIDTH: 166px" class="x-grid3-col x-grid3-cell x-grid3-td-lender.lenderName ">
<DIV class="x-grid3-cell-inner x-grid3-col-lender.lenderName" unselectable="on">
citi
</DIV>
</TD>
<TD style="WIDTH: 93px" class="x-grid3-col x-grid3-cell x-grid3-td-lender.loanAccountNumber ">
<DIV class="x-grid3-cell-inner x-grid3-col-lender.loanAccountNumber" unselectable="on">
...5434
</DIV>
</TD>
<TD style="WIDTH: 121px" class="x-grid3-col x-grid3-cell x-grid3-td-totalPayment ">
<DIV class="x-grid3-cell-inner x-grid3-col-totalPayment" unselectable="on">
$1,000.00
</DIV>
</TD>
<TD style="WIDTH: 178px" class="x-grid3-col x-grid3-cell x-grid3-td-nextPaymentDate x-grid3-cell-last ">
<DIV class="x-grid3-cell-inner x-grid3-col-nextPaymentDate" unselectable="on">
10/01/10
</DIV>
</TD>
</TR>
<TR class="x-grid3-row-body-tr">
<TD class="x-grid3-body-cell" colSpan="6">
<DIV class="x-grid3-row-body">
${body}
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
<A style="TOP: -18326px" class="x-grid3-focus" href="http://demo.biweekly.com:9081/ppp/Home.html?anchor=wizard#"></A>
</DIV>
</DIV>
<DIV class="x-grid3-resize-marker">
&nbsp;
</DIV>
<DIV class="x-grid3-resize-proxy">
&nbsp;
</DIV>
</DIV>
<DIV style="POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: white; WIDTH: 5px; ZOOM: 1; VISIBILITY: hidden; CURSOR: col-resize" id="x-auto-613" class=" x-component" __eventBits="4">
</DIV>
</DIV>
</FORM>
</DIV>
<DIV class="x-panel-footer x-panel-nofooter">
</DIV>
</DIV>

the JAVA page code is:


final FormPanel panel = new FormPanel();

final Grid<BeanModel> grid = new Grid<BeanModel>(ClientCommonDataStore.LOANS.getStore(), new ColumnModel(getColumnConfigs()));

grid.setAutoHeight(true);
grid.setBorders(true);
for (ColumnConfig column : grid.getColumnModel().getColumns()) {
column.setSortable(false);
column.setMenuDisabled(true);
}
grid.setLoadMask(true);
final GridView view = new GridView() {
{
focusEnabled = false;
}
};
view.setAutoFill(true);
view.setForceFit(true);
view.setShowDirtyCells(false);
grid.setView(view);

panel.add(grid, MARGIN_DATA);
}

private static List<ColumnConfig> getColumnConfigs() {
final GridCellRenderer<ModelData> renderer = new GridCellRenderer<ModelData>() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore listStore, Grid grid) {
final Loan loan = ((BeanModel) model).getBean();
if (loan != null && loan.isTerminated()) {
if ("totalPayment".equals(property)) {
return "<span style='color: #535357;'>" + (model.get(property) != null ? Util.CURRENCY_FORMAT.format((Double) model.get(property)) : "") + "</span>";
} else if ("firstMonelogicPayment".equals(property) || "nextPaymentDate".equals(property)) {
return "<span style='color: #535357;'>" + (model.get(property) != null ? Util.DATE_MM_DD_YY.format((Date) model.get(property)) : "") + "</span>";
} else {
return "<span style='color: #535357;'>" + (model.get(property) != null ? model.get(property).toString() : "") + "</span>";
}
}
if (loan != null && loan.getMakeUpCount() != null && loan.getMakeUpCount() > 0) {
grid.setToolTip(Msg.MSG.needMakeUpTextHomePage());
}
if ("totalPayment".equals(property)) {
return model.get(property) != null ? Util.CURRENCY_FORMAT.format((Double) model.get(property)) : "";
} else if ("firstMonelogicPayment".equals(property) || "nextPaymentDate".equals(property)) {
return model.get(property) != null ? Util.DATE_MM_DD_YY.format((Date) model.get(property)) : "";
} else {
return model.get(property) != null ? model.get(property).toString() : "";
}
}
};

final ColumnConfig accountIdColumn = new ColumnConfig("accountId", Msg.MSG.accountId(), 70);
accountIdColumn.setRenderer(renderer);

final ColumnConfig loanTypeColumn = new ColumnConfig("loanType.name", Msg.MSG.loanType(), 70);
loanTypeColumn.setRenderer(renderer);

final ColumnConfig lenderNameColumn = new ColumnConfig("lender.lenderName", Msg.MSG.lenderName(), 150);
lenderNameColumn.setRenderer(renderer);

final ColumnConfig loanAccountNumberColumn = new ColumnConfig("lender.loanAccountNumber", Msg.MSG.loanNumber(), 85);
loanAccountNumberColumn.setRenderer(renderer);

final ColumnConfig paymentAmountColumn = new ColumnConfig("totalPayment", Msg.MSG.paymentAmount(), 110);
paymentAmountColumn.setRenderer(renderer);

final ColumnConfig firstMoneylogicPaymentColumn = new ColumnConfig("nextPaymentDate", Msg.MSG.nextPayment(), 156);
firstMoneylogicPaymentColumn.setRenderer(renderer);

return Arrays.asList(
accountIdColumn,
loanTypeColumn,
lenderNameColumn,
loanAccountNumberColumn,
paymentAmountColumn,
firstMoneylogicPaymentColumn
);
}

public final BufferedStore<BeanModel> getStore() {
return getStore(null);
}

public final BufferedStore<BeanModel> getStore(Boolean autoLoad) {
if (store == null) {
store = new BufferedStore<BeanModel>(loader);
store.setMonitorChanges(true);
store.addListener(BufferedStore.Commit, new Listener<BufferedStore.BufferedStoreEvent<BeanModel>>() {
public void handleEvent(BufferedStore.BufferedStoreEvent<BeanModel> be) {
addProcess();
commit(be.getModified(), be.getRemoved());
loaded = true; // Server and client are in sync
loading = false;
}
});
store.addListener(BufferedStore.AfterCommit, new Listener<BufferedStore.BufferedStoreEvent<BeanModel>>() {
public void handleEvent(BufferedStore.BufferedStoreEvent<BeanModel> be) {
removeProcess();
}
});
}
if (autoLoad != null && autoLoad && !loading || autoLoad == null && !loaded && !loading) {
loader.load();
}
return store;
}

[sven]

Have you tried to reproduce this in s small standalone testcase? Its impossible to say without having one.

[jarik_bsu]

The major problem is that issue we cannot catch. No one our Programmer and tester does not see this Empty Grid.
But one of our client catches Empty Grids very often. But sometimes grid is empty, sometimes it renders well. If client click 'Refresh' of F5 - grid renders well.

Client reports about this bug during last few months and we cannot fix because we cannot catch it. I hope that somebody else sees the same bug and could help us.

Client has the PC with Windows XP 64bit and IE 8.

We have tried to simulate his system by installing the Windows XP 64 on Virtual machine and test on it... But on our test system site works well.

[sven]

Is the grid shown before data was loaded and than jumps away or isnt it shown from the beginning?

[jarik_bsu]

Grid is shown when page is shown. It shows the Correct empty grid with column headers and without data rows.
On page constructor we call Load method that loads data (list of bean models). After data is loaded - grid shows the rows.
Also we use refresh() to automatically adjust the column widths.

grid.addListener(Events.ViewReady, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
grid.getView().refresh(false);
}
});

[sven]

Grid is shown when page is shown. It shows the Correct empty grid with column headers and without data rows.
On page constructor we call Load method that loads data (list of bean models). After data is loaded - grid shows the rows.So when does it hide, when its shown all the time? ;)

[sven]

What i just see, your focuselement is cometply wrong positioned. Is the grid hidden while loading data or something like this?

Try to focus the first row after data loading finished and grid rendered the data.

Also why do you call refresh on the GridView in the ViewReady event?

[jarik_bsu]

So when does it hide, when its shown all the time?
Good Question. I've contacted to this client and he told me that:
if everything is fine - grid shows before and after data is loaded.
But if the bug exists - the initial empty grid is not shown - only border.

[jarik_bsu]

Is the grid hidden while loading data or something like this?
No, grid is always visible. We use the modal Loading window while data is loading. This loading window is shaded the page, but we could see everything.


Why do you call refresh on the GridView in the ViewReady event?
We use it to redraw the grid after the data is loaded.It automatically adjust the Column widths. We use the
view.setAutoFill(true);
view.setForceFit(true);
but if we does not refresh the GridView on ViewReady event - the column widths does not adjusted automatically after data is loaded.

[sven]

columns never adjust. You have to set a width on the columns. Also you are not sizing your grid (this can course this too). Try to set a real height on the grid, or take a look at this example http://www.sencha.com/examples/explorer.html#basicgrid

All this is just guessing around. I would first inspect why the focuselement is positioned with -18326px

[jarik_bsu]

Why do columns never adjust?
grid.getView.setForceFit(true) should adjust the columns width, shouldn't it?

We set the default column width, but the sum(columnWidth) < estimated grid.width

I always see that initially grid appears with narrow columns (only headers), but after data has been loaded - columns become wider and fit the whole grid width. As I understand - the proportions is not changed, but each column widths are increased.
How could we do it without the gridView.refres() on ViewReady event?

and yes, we do set the grid width because we use
panel.add(grid,new MarginData(5));

[sven]

grid.getView.setForceFit(true) should adjust the columns width, shouldn't it?
Yes, but no call to refresh required normally for this.

You maybe set a width, but i am talking about a height.

[jarik_bsu]

Unfortunately today we have tried to remove this ViewReady refresh. And all columns left narrow after data had been loaded.

Height is set automatically grid.setAutoHeight(true); because we do not know how many data rows we get.