How to add data to the GXT Grid properly?

Question

I have a webapp in which I need to get some data from the file and fill to the table. Here is the code of the page with this table:

public class Rules extends ContentPanel{
    private final ServerManagementAsync serverManagementSvc = GWT.create(ServerManagement.class);
    private ArrayList<PropertyItem> propslist;
    private ArrayList<PropertyItem> itemArrayList;
    private EditorGrid<PropertyItem> grid;

    public Rules(final String customerId){
        setLayout(new FlowLayout(10));

        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

        ColumnConfig column = new ColumnConfig();
        column.setId("name");
        column.setHeader("Name");
        column.setWidth(220);

        TextField<String> text = new TextField<String>();
        text.setAllowBlank(false);
        column.setEditor(new CellEditor(text));
        configs.add(column);

        column = new ColumnConfig();
        column.setId("type");
        column.setHeader("Type");
        column.setWidth(220);

        TextField<String> typeText = new TextField<String>();
        typeText.setAllowBlank(false);
        column.setEditor(new CellEditor(typeText));
        configs.add(column);

        column = new ColumnConfig();
        column.setId("value");
        column.setHeader("Value");
        column.setWidth(220);
        configs.add(column);

        final ListStore<PropertyItem> store = new ListStore<PropertyItem>();
        propslist = getPropslist(customerId);

        for (PropertyItem propertyItem: propslist){
            store.insert(propertyItem, 0);
        }

        ColumnModel cm = new ColumnModel(configs);

        setHeading("Settings");
        setFrame(true);
        setWidth(600);
        setLayout(new FitLayout());

        grid = new EditorGrid<PropertyItem>(store, cm);
        grid.setAutoExpandColumn("name");
        grid.setBorders(true);
        add(grid);

        ToolBar toolBar = new ToolBar();
        setTopComponent(toolBar);
        setButtonAlign(Style.HorizontalAlignment.RIGHT);

        addButton(new Button("Refresh", new SelectionListener<ButtonEvent>() {
            @Override
            public void componentSelected(ButtonEvent ce) {
                store.insert(getPropslist(customerId), 5);
            }
        }));
        addButton(new Button("Add", new SelectionListener<ButtonEvent>() {

            @Override
            public void componentSelected(ButtonEvent ce) {
                store.commitChanges();
            }
        }));


    }

    public ArrayList<PropertyItem> getPropslist(String customerId){
        itemArrayList = new ArrayList<PropertyItem>();
        AsyncCallback<ArrayList<PropertyItem>> callback = new AsyncCallback<ArrayList<PropertyItem>>() {
            @Override
            public void onFailure(Throwable throwable) {

            }

            @Override
            public void onSuccess(ArrayList<PropertyItem> propertyItems) {
                itemArrayList = propertyItems;
                Window.alert("read successful");
                }
            }
        };
        serverManagementSvc.getProperties(customerId, callback);
        return itemArrayList;
    }
}

When I run my app I See only columns names and no data in the cells(and no cells of course). As the example I used this one: Ext GWT 2.2.6 Explorer(Grid)

I don't understand what could cause such proplem. What can be the reason of this?

Answer 1

Because your propsList is being populated Asynchronously the grid is being rendered before the server call returns.

To fix this first make the store a private property like the grid

Next, move the code that populates your store:

    for (PropertyItem propertyItem: propslist){
        store.insert(propertyItem, 0);
    }

into the onSuccess Method of your callback.

Lastly, you may also need to call : grid.reconfigure(grid.getStore(), grid.getColumnModel()); Just to get the Grid to render again.