This is a series of tutorials for upgrading the Table component to Grid. It will be performed by migrating to Framework 7 style of Grid, then migrating to Framework 8. As a reference, Gridv7 is the Grid component from Framework 7, while Grid is the latest Grid component in Framework 8. Naturally, you can also migrate straight from Table to the Framework 8 style Grid.
In the previous post, we saw the migration of a basic Table to Grid for Framework 7, then to Framework 8. Moving forward, I will skip all similar code related to containers and populating data, and will only focus on the highlighted APIs for the examples we have.
In this part, I will cover two examples about the selection modes, and make some comparisons on how Grid deals with data, as well as some corner cases that got modified.
Single Selection
Migrate from Table to Framework 7 Grid
Grid by default has single selection, so we don’t need to explicitly write this:
table.setSelectable(true);
But at any point, if you want to move or revert back to default selection mode, you can use:
table.setSelectionMode(SelectionMode.SINGLE);
Grid is immediate by default, so we don’t need this line anymore:
table.setImmediate(true);
To keep track of a selected item, instead of:
table.addValueChangeListener( … )
We use:
table.addSelectionListener( … )
And the selection event does not contain information about the selected item, instead of:
event.getProperty().getValue().toString();
We get it from the table directly:
table.getSelectedRow();
Related commit: Single Select: To Grid v7
The event.getProperty().getValue() was always returning a raw Object, instead of a class of the type of the container’s data, and it was required to cast it. But losing information about the selected item all together was not an optimal solution either in the early phase of Grid, and this got fixed as we will see in Framework 8.
Migrate to Framework 8 Grid
No big difference from the previous code, except that the new Grid deals with data a bit differently, so we need to differentiate between SingleSelect and MultiSelect, this code:
if (table.getSelectedRow() != null)
Should be replaced with:
if (table.asSingleSelect().getValue() != null)
And to get the selected bean, you can replace this code:
table.getSelectedRow()
With:
table.asSingleSelect().getValue()
And here comes an important note: table.getSelectedRow() returns the ID of the selected row, which was a number because it is using an IndexedContainer. Most often developers were actually using BeanItemContainer, where the ID was the actual bean presented on the selected row. Now, in Framework 8, it is always the bean.
One more thing we notice, if we compare the final result here, is the order of the columns, as well as the case of the first letter in the column name.
You can adjust the order using setColumnOrder:
table.setColumnOrder("name", "city", "year"); And you can modify the captions manually using setCaption:
table.getColumn("name").setCaption("name"); In this demo I will skip all those corner cases, they are explained here just for elaboration.
Related commit: Single Select: To Grid v8
Multi Selection
Migrate from Table to Framework 7 Grid
Similar to what we have done in Single Selection, here is the only code difference to get multi selection enabled, instead of:
table.setMultiSelect(true);
Use:
table.setSelectionMode(Gridv7.SelectionMode.MULTI);
The result is different though, multi selection in Grid is done through checkboxes instead of holding ctrl/cmd while selecting other items. There is a feature request for it, however it is not highly demanded by many developers. If you want this feature to be implemented, I encourage you to show interest by giving it a +1 on Github, otherwise it might never be implemented due to low need by the community, and probably due to bad UX.
Related commit: Multi Select: To Grid v7
Migrate to Framework 8 Grid
In Framework 8, Grid multi selection would be defined as the following:
table.setSelectionMode(Grid.SelectionMode.MULTI);
And retrieving the set of selected beans is done by using:
table.asMultiSelect().getSelectedItems())
Related commit: Multi Select: To Grid v8