converting table to grid

Vaadin 6 / 7 / 8
1

Hello,
We use a lot of tables in our website ( Vaadin Table ), but our customer just told us that they want to be able to edit inside the table. Now, I know that is possible in Table ( I already got that to work ), but I sort of like the edit mechanism for Grid better. Is there an easy way to convert Vaadin Table to Vaadin Grid? Since Grid is not a drop in replacement, I know it will take some conversion work. Just wondering how hard people have found it, and if there is any documentation out there on doing such a conversion.

Here is our normal table usage:

[code]
public final class ReplenishmentOrderMgmtView extends VerticalLayout implements View {

private final Table table;
private static final String[] DEFAULT_COLLAPSIBLE = {
"contactFirstName",
"contactLastName",
"supplierName",
"carrier", "carrierService", "trackingNumber"
};
private static final Object[] VISIBLE_COLUMNS = {
"barcode",
"contactUserId",
"contactFirstName",
"contactLastName",
"PO",
"orderId",
"cellId",
"cellName",
"wmsItem",
"description",
"supplierId",
"supplierName",
"statusDesc",
"resizedBinQty",
"expectedOnDockDate",
"shipQuantity",
"receivedQty",
"lastReceiptDate",
"carrier",
"carrierService",
"trackingNumber",
"creationDate"
};
private static final String[] COLUMN_NAMES = {
"Barcode",
"Contact User",
"First Name",
"Last Name",
"PO Number",
"Replenishment Order Id",
"Cell Id",
"Cell Name",
"Part",
"Description",
"Supplier Id",
"Supplier Name",
"Status",
"Resized Bin Qty",
"Expected On Dock Date",
"Ship Quantity",
"Received Qty",
"Last Receipt Date",
"Carrier",
"Carrier Service",
"Tracking Number",
"Creation Date"
};


private Table buildTable() {
    final Table table = new Table();
    table.setSizeFull();
    table.addStyleName(ValoTheme.TABLE_BORDERLESS);
    table.addStyleName(ValoTheme.TABLE_NO_HORIZONTAL_LINES);
    table.addStyleName(ValoTheme.TABLE_COMPACT);
    table.setSelectable(true);

    table.setColumnCollapsingAllowed(true);

    table.setColumnReorderingAllowed(true);
    
    updateList( table );
    
    table.setSortContainerPropertyId("creationDate");
    table.setSortAscending(true);
    
    table.setColumnHeaders( COLUMN_NAMES );

    // Allow dragging items to the reports menu

// table.setDragMode(TableDragMode.MULTIROW);
table.setMultiSelect(false);

    table.addActionHandler(new ReplenishmentOrdersActionHandler());
    
    table.addValueChangeListener(event -> this.selectItemFromTable());
    
    table.setImmediate(true);

    return table;
}

}
[/code]There is also some binding involved in there - my data source is a java bean. Obviously, I am only includine code that will impact the table itself. Any advice or opinions would be much appreciated.

2

As you are aware there are API differences between Table and Grid, so conversion requires some manual work. The data model in both are the same, so if you used BeanItemContainer with Table, you can use it with Grid too. However some API shortcuts are not present in Grid, but you can use Container API’s directly.

The notable difference is that in Table you can place Components in cells and if you have done that extensively in your application, those need to be replaced with Widget Renderers. You can find some basic Renderes in core framework. In our directory there are some additional ones (e.g.
https://vaadin.com/directory#!addon/grid-renderers-collection-for-vaadin7
) and you can use those as study material to learn how to create your own ones if needed.

Edit functionality is quite different in Grid. There are actually many ways to edit data. You can use integrated row editor or the unbuffered mode cell editor. Grid Renderers can be used for columnar edit mode. Fourth alternative is to create inline forms in Grid Details Generator. Alternatively Grid Details Generator is good for showing additional data items, which helps you to reduce visible column count and adds performance.

If you need to add row specific actions, my favourite way to do that is to use Context Menu add-on, which you can also find in the Directory (
https://vaadin.com/directory#!addon/vaadin-contextmenu
)

Sometimes you need to re-map some of the use cases. Currently Grid for example does not have drag’n’drop feature for rows. On the other hand Grid has lot of new features, like column grouping. The client widget itself is more modern and renders much faster in new browsers.