ListGrid and DynamicForm

Smart GWT Technical Q&A
1

Simple situation. I’ve got a ListGrid that has an edit button on each row created from the createRecordComponent method. The button’s clickHandler is like so:

final Button editOrder = new Button("Edit");
    editOrder .addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent clickEvent) {
            showEditOrderWindow(listGrid.getSelectedRow());
        }
});

The structure of the record would be analogous to an Order. An Order has basic information such as total, date, shipping info but also has a list of line items. I would like to list the lineitems in a listgrid (each cell should be editable and validated) but also add new line items. I would then like to have a save button that sends updated order to the server and update the original listgrid.

Right now, I have something like so:

  1. This is the form with the generic order info. OrderDs has all fields (for now we display them all but in the future the form should have a limited selection). The “order” record is the currently selected record.
final DynamicForm form = new DynamicForm();
form.setDataSource(OrderDs.getInstance());
form.setWidth(500);
form.setAutoHeight();
form.addDrawHandler(new DrawHandler() {
    @Override
     public void onDraw(DrawEvent drawEvent) {
          form.editRecord(order);
     }
});
  1. This is the listGrid part that lists all the lineitems. Line items also have many fields that should be saved but no edited (displayed).
final DataSource pricesDs = PriceDs.getInstance();
final ListGrid grid = new ListGrid();
grid.setDataSource(LineItemDs.getInstance());
grid.setData(order.getAttributeAsRecordArray("lineItems"));
grid.setWidth(400);
grid.setCanEdit(true);
  1. The save button:
Button saveButton = new Button("Save");
        saveButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent clickEvent) {
                Record[] lineItems = grid.getRecords();
                Record newOrder = form.getValuesAsRecord();
                newOrder .setAttribute("lineItems", lineItems);

                JSONObject orderJson = new JSONObject(newOrder.getJsObj());

                // send up the new order record!
            }
        });

Can someone figure out if this is the best way? This form also needs to be used to create new orders. The problem is that we should not be replacing, but rather “merging” all the data between the json records. Also, how should the original listgrid be updated with the new data? Simple refresh of the datasource will required running back to the server.