Grid not displaying data

[iwebdev]

I'm using a paging grid in multiple places, created a PagingGrid class. It displays fine, columns have their headings, etc., but the data doesn't load. I'm not getting any server side errors and I'm not seeing any client side errors either (using gwt-log to display client errors in FireBug). Any ideas why the data is not getting loaded? A very close version of the code I'm using is below. I stripped out code that does not relate to displaying the grid.


This is the PagingGrid class:


package com.test.gwt.client.mvc;

import com.test.common.Constants;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.data.BasePagingLoadResult;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelReader;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.LoadListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.store.StoreListener;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
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.GridSelectionModel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;


public class PagingGrid<M> extends LayoutContainer
{
private PagingLoader<PagingLoadResult<BeanModel>> m_loader;
private Grid<BeanModel> m_grid;
private ColumnModel m_columnModel;
private ContentPanel m_cntntpnlNewContentpanel;
private PagingToolBar m_pagingToolBar;
private String m_heading = "Unknown";
private String m_autoExpandColumn;
private RpcProxy<BasePagingLoadResult<M>> m_proxy;
private IPagingGridLoader<M> m_gridLoader;
private Object m_parameters;
private int m_pageSize = ListPage.DEFAULT_RECORDS_PER_PAGE;
private ListStore<BeanModel> m_store;

public PagingGrid(ListStore<BeanModel> store, ColumnModel cm)
{
m_columnModel = cm;
m_store = store;

m_grid = new Grid<BeanModel>(m_store, m_columnModel);
m_grid.setBorders(false);
setLayout(new FitLayout());

m_proxy = new RpcProxy<BasePagingLoadResult<M>>() {


@Override
protected void load(Object loadConfig, AsyncCallback<BasePagingLoadResult<M>> callback) {
m_gridLoader.load(loadConfig, m_parameters, callback);
}

};

m_loader = new BasePagingLoader<PagingLoadResult<BeanModel>>(m_proxy, new BeanModelReader());
m_loader.setRemoteSort(true);



// Attach event will be used to load this instance of the paging grid
m_grid.addListener(Events.Attach, new Listener<GridEvent<BeanModel>>() {
public void handleEvent(GridEvent<BeanModel> be) {
m_loader.load(0, m_loader.getLimit());
}
});

// Detach event will be used to reset this instance of the listing page
m_grid.addListener(Events.Detach, new Listener<GridEvent<BeanModel>>() {
public void handleEvent(GridEvent<BeanModel> be) {
if (m_store != null)
m_store.removeAll();
}
});


m_cntntpnlNewContentpanel = new ContentPanel();
}

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

m_cntntpnlNewContentpanel.setBodyBorder(false);
m_cntntpnlNewContentpanel.setBorders(false);
m_cntntpnlNewContentpanel.setAnimCollapse(false);
m_cntntpnlNewContentpanel.setHeading(m_heading);
m_cntntpnlNewContentpanel.setLayout(new FitLayout());

m_grid.setAutoExpandColumn(m_autoExpandColumn);
m_grid.setLoadMask(true);
m_grid.setBorders(Boolean.valueOf(Registry.<String>get(Constants.CLIENT_UI_BORDER)));
GridSelectionModel<BeanModel> selectionModel = new GridSelectionModel<BeanModel>();
selectionModel.setSelectionMode(Style.SelectionMode.SINGLE);
m_grid.setSelectionModel(selectionModel);


m_pagingToolBar = new PagingToolBar(m_pageSize);
m_pagingToolBar.bind(m_loader);

m_cntntpnlNewContentpanel.add(m_grid);

m_cntntpnlNewContentpanel.setBottomComponent(m_pagingToolBar);
add(m_cntntpnlNewContentpanel);
}

public void setPageSize(int pageSize)
{
m_pageSize = pageSize;
}

public void setLoadHandler(IPagingGridLoader<M> gridLoader, Object parameters)
{
m_gridLoader = gridLoader;
m_parameters = parameters;
}

public void setAutoExpandColumn(String autoExpandColumn) {
m_autoExpandColumn = autoExpandColumn;
}

public void setHeading(String text) {
m_heading = text;
}

public String getHeading() {
return m_heading;
}

public void setTopComponent(Component topComponent)
{
m_cntntpnlNewContentpanel.setTopComponent(topComponent);
}

public void addLoadListener(LoadListener listener)
{
m_loader.addLoadListener(listener);
}
}





This is stripped down version of the class using the PagingGrid:


package com.test.gwt;


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


import com.test.gwt.client.TestRemoteServiceAsync;
import com.test.gwt.client.mvc.EditDialog;
import com.test.gwt.client.mvc.IPagingGridLoader;
import com.test.gwt.client.mvc.PagingGrid;
import com.test.gwt.client.util.TestUtil;
import com.test.model.HospitalMaster;
import com.test.model.MissingHospitalCharge;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoadResult;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.event.WindowEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.rpc.AsyncCallback;


public class asdf extends EditDialog {

private BeanModel missingChargeBean;
private LayoutContainer mainLayoutContainer;
private BorderLayoutData mainNorthData;
private BorderLayoutData mainCenterData;
private VerticalPanel mainPanel;
private TabPanel tabPanel;
private TabItem supportingDataTab;
private LayoutContainer supportingDataTabLayoutContainer;


private BorderLayoutData northData;
private BorderLayoutData centerData;

private PagingGrid<HospitalMaster> hospitalDataGrid;

final TestRemoteServiceAsync testService = (TestRemoteServiceAsync) Registry.get("testService");



private asdf() {
super();
setBlinkModal(true);
setLayout(new FitLayout());
setSize(800, 600);
setBorders(true);
addButton(closeButton);
init();
}

private void init()
{
// Create the main layout container
mainLayoutContainer = new LayoutContainer();
mainLayoutContainer.setLayout(new BorderLayout());


// Create the main layout (north and center)
mainNorthData = new BorderLayoutData(LayoutRegion.NORTH);
mainNorthData.setHideCollapseTool(true);
mainNorthData.setFloatable(false);
mainNorthData.setSplit(false);
mainNorthData.setCollapsible(false);
mainNorthData.setMargins(new Margins(5, 5, 3, 5));


mainCenterData = new BorderLayoutData(LayoutRegion.CENTER);
mainCenterData.setSplit(true);
mainCenterData.setCollapsible(false);
mainCenterData.setMargins(new Margins(3, 5, 5, 5));

// Create the main north panel
mainPanel = new VerticalPanel();

// Create the columns config
List<ColumnConfig> hospitalColumnsConfig = new ArrayList<ColumnConfig>();


// Create the hospital data column config
hospitalColumnsConfig.add(new ColumnConfig("acctno", "Account", 100));
ColumnConfig hospitalDate = new ColumnConfig("serviceDate", "Service Date", 100);
hospitalDate.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));
hospitalColumnsConfig.add(hospitalDate);
hospitalColumnsConfig.add(new ColumnConfig("ub92code", "UB92", 100));
hospitalColumnsConfig.add(new ColumnConfig("chgcd", "Charge Code", 100));
hospitalColumnsConfig.add(new ColumnConfig("description", "Description", 100));
hospitalColumnsConfig.add(new ColumnConfig("atndrname", "Attending Physician", 100));
hospitalColumnsConfig.add(new ColumnConfig("diag1", "Diagnostic Code1", 100));
hospitalColumnsConfig.add(new ColumnConfig("diag2", "Diagnostic Code2", 100));
hospitalColumnsConfig.add(new ColumnConfig("diag3", "Diagnostic Code3", 100));



// Create the column models
final ColumnModel hospitalColumnsModel = new ColumnModel(hospitalColumnsConfig);

// Create the TabPanel
tabPanel = new TabPanel();

// Create the Supporting Data tab
supportingDataTab = new TabItem("Supporting Data");
supportingDataTab.setLayout(new FitLayout());

// Create the layout container for the Supporting Data tab
supportingDataTabLayoutContainer = new LayoutContainer();
supportingDataTabLayoutContainer.setLayout(new BorderLayout());


// Create the Hospital Data grid
hospitalDataGrid = new PagingGrid<HospitalMaster>(new ListStore<BeanModel>(), hospitalColumnsModel);
hospitalDataGrid.setBorders(true);
hospitalDataGrid.setHeading("Hospital Data");

// Create the Supporting Data layout data (north and center)
northData = new BorderLayoutData(LayoutRegion.NORTH);
northData.setSplit(true);
northData.setCollapsible(false);
northData.setMargins(new Margins(0, 0, 3, 0));

centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setSplit(true);
centerData.setCollapsible(false);
centerData.setMargins(new Margins(3, 0, 0, 0));


// Add the grids with their associated layout data to the Supporting Data layout container
supportingDataTabLayoutContainer.add(hospitalDataGrid, northData);


// Add the Supporting Data layout container to the Supporting Data tab
supportingDataTab.add(supportingDataTabLayoutContainer, new FitData());

// Add the tabs to the tabPanel
tabPanel.add(supportingDataTab);

// Add the tabPanel to the view
mainLayoutContainer.add(mainPanel, mainNorthData);
mainLayoutContainer.add(tabPanel, mainCenterData);

// Add the main layout container to this dialog
add(mainLayoutContainer);
}

public void configure(BeanModel beanModel) {


this.missingChargeBean = beanModel;


hospitalDataGrid.setLoadHandler(new IPagingGridLoader<HospitalMaster>(){


@Override
public void load(Object loadConfig, Object parameters, final AsyncCallback<BasePagingLoadResult<HospitalMaster>> callback) {


MissingHospitalCharge missingCharge = ((BeanModel)parameters).<MissingHospitalCharge>getBean();

testService.getMissingHospitalChargeEvidence((BasePagingLoadConfig)loadConfig, missingCharge,
new AsyncCallback<BasePagingLoadResult<HospitalMaster>>() {
public void onFailure(Throwable caught) {
hospitalDataGrid.unmask();
TestUtil.checkSessionTimeout(caught, callback);
}


public void onSuccess(BasePagingLoadResult<HospitalMaster> result) {
callback.onSuccess(result);
}
});
}
}, missingChargeBean);



// Set this to ensure dialog layout occurs
this.setLayoutNeeded(true);
}


@Override
protected void onKeyPress(WindowEvent we) {
if (we.getKeyCode() == KeyCodes.KEY_ESCAPE)
this.hide();
else
super.onKeyPress(we);
}
}

[iwebdev]

I have added in a fair amount of try/catch blocks and logging any exceptions out to FireBug, but no exceptions occur. The call to the service appears to execute fine (I can see the response and it looks good) and it does seem to get the correct amount of data in the response (I have it limited to 10 records in the service layer and all 10 are being returned). The data just doesn't get displayed in any of the grids. Any ideas on either how to debug this better (I'm not able to run in Development mode for whatever reason, so stuck with Tomcat and the browser) or any issues with the code I posted? I've been looking at this for a long time and need a resolution, so any help is VERY much appreciated!

[sven]

We would really like to help you. But for that we would require a fully working testcase implementing EntryPoint, so we can run that code without any other dependencies. It would be great if you could provide that.

[iwebdev]

Might take a little bit to pull everything from my current project into a new project. I'll put a complete project together that implements EntryPoint and post it here. Thanks

[iwebdev]

Please see attached zip file. I'm using gxt-2.1.1-gwt2, gwt-2.0.3, and gwt-log-3.0.1 and eclipse indigo. 28813

[iwebdev]

I wanted to see if anyone from Sencha was able to take a look at my code and provide some guidance. Many thanks!

[catalin.ciobanu]

I wanted to see if anyone from Sencha was able to take a look at my code and provide some guidance. Many thanks!

yeah, I doubt that .. because if you click your link ->

Sencha Forums Message Invalid Attachment specified. If you followed a valid link, please notify the administrator (http://www.sencha.com/forum/sendmessage.php)

[iwebdev]

Weird. I get the file without issue. Thanks for the heads up. I'll repost it.

[iwebdev]

Here's the file again

[denu]

I've also trouble with Grid in TabPanel maybe similar to yours.
Column headers are displayed, but rows with data are not.

I've discovered (thanks to hovering TabPanel with Firebug), that the data actually is rendered out there, but can't be seen - like the color of text was white (of course I've checked the style sheets and color is set to black).

When I've put my grid to single ContentPanel, the grid displays fine.

Can you check it the way I did (with firebug/dragonfly/developer tools)?

[atlanta.peter]

Do you have a fix for this issue?

[denu]

Setting height explicitly was the solution in my case with grid not showing data inside of TabPanel's TabItem.

grid.setHeight(400);

[atlanta.peter]

Setting height explicitly was the solution in my case with grid not showing data inside of TabPanel's TabItem.

grid.setHeight(400);

This did not fix my issue. But thanks for the reply

[mihaj]

I researched your project from zip archive. And I think that problem is on PagingGridTestDialog class at source line 225 - callback.onSuccess(result).

I can understand how work this. What real method is called?
So I had troubles with pagging late and wrote self solution. Maybe someone will take hint about working of this interface ?