How to add rows to a GXT grid

Question

I'm trying to create a fairly simply GWT app using the GXT framework, and am doing this based on the eBook "Ext GWT 2.0 Beginners Guide". It details all the step for building an app using GXTs MVC model, and most of it is working as expected, however I can not - for the life of it - add new rows to my Grid.

The initial loading of the Grid data (through itemStore, loader, and an RPCProxy work correct).

However every time I fire the event that triggers adding a new row, the ListStore to which I want to add, is empty (not null! but empty) - even though my Grid is showing data after the initial load!

Here is some of the relevant code:

public class MessageGrid extends LayoutContainer {
    private final Grid<ModelData> grid;
    private final ListLoader<ListLoadResult<MarketingMessage>> loader;
    private final ListStore<ModelData> itemStore;
    public MessageGrid() {
        setLayout(new FitLayout());
        final MarketingServiceAsync marketingService = Registry.get(MarketingUIConstants.MARKETING_SERVICE);
        RpcProxy<List<MarketingMessage>> proxy = new RpcProxy<List<MarketingMessage>>() {
            @Override
            protected void load(Object loadConfig, final AsyncCallback<List<MarketingMessage>> callback) {
                marketingService.getMessages(callback);
            }
        };
        final List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
        columns.add(new ColumnConfig("col1", "Name", 100));
        columns.add(new ColumnConfig("col2", "Phone", 100));
        final ColumnModel columnModel = new ColumnModel(columns);       
        loader = new BaseListLoader<ListLoadResult<MarketingMessage>>(proxy);
        itemStore = new ListStore<ModelData>(loader);
        grid = new Grid<ModelData>(itemStore, columnModel);
        grid.setBorders(true);
        grid.setAutoExpandColumn("sentTime");
        grid.setAutoHeight(false);
        grid.setHeight("100%");     
    }

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        loader.load();
        add(grid);
    }

    public void addMessage(MarketingMessage marketingMessage) {
        itemStore.add(new MarketingMessage("test", "test")));
    }
}

addMessage() is being called by the owning component (a View to which this LayoutContainer has been added).

If I set a breakpoint inside the addMessage() method, my itemStore has size 0 (same goes for grid.getStore() for that matter).

I've tried various different changes to this code and I have yet to see a row being added.

On a similar note: if inside the addMessage() method I try to do a reload from the proxy - since I do update the server side data as well - ie. loader.load(), it also does not have any visible effect.

Colin Alworth Colin Alworth · Accepted Answer · 2012-01-12T22:26:02

The loader is going to be asynchronous - it needs to wait for the server (MarketingService) to return values. Are you certain that this is returning a non-empty list? Verify this by replacing the callback in your proxy with your own callback that checks the contents returned to the client (it may not even be called at all if the server threw an exception).

If addMessage is called onRender or shortly thereafter, it may be too early, and the server may not have returned data yet, so the store may still be empty. If called from a button click or something, this won't be an issue.

Check your log for exceptions, you are passing a Proxy that handles a List of items to a Loader that expects a ListLoadResult - this could also be a source of errors. The confusing generics in GXT 2 should mostly be resolved in 3, which is currently in beta.

How to add rows to a GXT grid

1 Answers