GWT DataGrid not visible (UIBinder and LazyPanel)

Question

I am building a GWT application.

In this application I have a number of DataGrid implementations showing data retrieved from the server. In one panel I have a TabLayoutPanel, with a DataGrid on each tab.

I am attempting to lazy-load the DataGrids when the parent tab becomes visible.

Here is the ui.xml:

<g:TabLayoutPanel width="800px" height="450px" barUnit='EM' barHeight='3'>
<g:tab>
  <g:header size='7'><b>Volunteer Assignments</b></g:header>
  <grid:VolunteerAssignmentGrid/>
</g:tab>
<g:tab>
  <g:header size='7'><b>Volunteer Details</b></g:header>
  <g:LazyPanel ui:field="lazyDetails">
    <grid:VolunteerFieldsGrid/>       
  </g:LazyPanel>
</g:tab>
</g:TabLayoutPanel>

In the above code, VolunteerAssignmentGrid and VolunteerFieldsGrid are sub-classes of DataGrid.

The VolunteerAssignmentGrid is visible immediately and the data displays OK.

However, the VolunteerFieldsGrid on the next tab does not display at all.

The strange thing is, it is requesting the data at the correct time (when I click on the other tab), and the server response is correct. It's as if the table is not visible.

Any ideas why the second DataGrid is not visible?

EDIT:

The UiBinder class:

public class VolunteerDetailsPanel extends DialogBox {

interface Binder extends UiBinder<Widget, VolunteerDetailsPanel> {}
private static final Binder binder = GWT.create(Binder.class);

@UiField LazyPanel lazyDetails;
private Record volunteerRecord;
private String fullName;
private String volunteerId;

public VolunteerDetailsPanel(Record record) {
    this.volunteerRecord = record;
    fullName = volunteerRecord.getValue("forename")+" "+volunteerRecord.getValue("surname");
    volunteerId = volunteerRecord.getValue("id");
    setText(fullName);
}

public void initComponent() {
    setWidget(binder.createAndBindUi(this));
}

@UiFactory VolunteerAssignmentGrid createAssignmentGrid() {
    return new VolunteerAssignmentGrid(volunteerId, fullName);
}

@UiFactory VolunteerFieldsGrid createFieldsGrid() {
    return new VolunteerFieldsGrid(volunteerId);
}


}

As requested, also the VolunteerFieldsGrid class. It extends ListGrid (one of mine, but too long to post here, all my other Grids extend it and are OK), which in turn extends GWT's DataGrid:

public class VolunteerFieldsGrid extends ListGrid {

public VolunteerFieldsGrid(String volunteerId) {

    super(100, "name", false);
    setWidth("100%");

    ListGridColumn<?>[] columns = new ListGridColumn<?>[] {
        new FieldNameColumn("Field", "name").width(75),
        new TextColumn("Value", "value").width(300)
    };
    setColumns(columns);

    ListGridDataProvider data = ListGridDataProvider.getInstance("field",
            "/volunteer/"+volunteerId, "name", false);

    setDataProvider(data);
}

}

can you show the owner of uibinder template and the VolunteerFieldsGrid? — klarki

klarki klarki · Accepted Answer · 2013-12-16T21:27:19

You have to register a handler for SelectionEvent in the TabLayoutPanel that will call LazyPanel.setVisible(true). Try something like this in UiBinder:

@UiHandler("yourTabPanelUiField")
void onSelectionEvent(SelectionEvent event) {
  //for extra functionality check if EventTarget equals the correct tab
  lazyDetails.setVisible(true);
}

GWT DataGrid not visible (UIBinder and LazyPanel)

1 Answers