Vaadin 7.4.0.beta1 - First impressions of Grid

To test Grid, I’ve created a new project on 7.4.0.beta1, added one Grid to the page and gave it a generated Container with 5 columns and 1000 rows. I maximized the list and set it editable.

Keyboard navigation

When a cell have got the focus, I can navigate from cell to cell with the arrow keys, which is nice.
If the cell is outside the visible area, the table is scrolled. Again, nice.

Pressing Return makes the row editable, but it loses focus, and you have to click in the field to set it again.
When a field in the editable row has focus, you jump to next/prev field with TAB / shift-TAB.
However, if the field you tab to is outside the visible area, the list isn’t scrolled.

You can discard the editor row with Escape, but there didn’t seem to be a shortcut for accepting the changes.

Had some strange behaviour with a date field; Tabbing in to it marked the date text. On the next TAB the focus seemed to disappear, but pressing space brought down the date picker, so presumably the date picker icon had focus.
However, after I closed this and used TAB / shift-TAB, the date picker icon did not steal the focus again.

Interesting TAB behaviour

I clicked inside the table to give it focus and pressed TAB;
Focus jumped from the cell I was in, to the row-select checkbox on the first row in the leftmost column.
It continued downwards, and when it reached the last row, it scrolled in one more row, but lost the header-row.
After that the focus left the table.

Row-select checkbox column

In the leftmost column there is a column with checkboxes for selecting the lines.
Clicking on the row itself does not select it, you have to use the checkbox?
No support for shift-selecting a range of rows. Hmm.

Row editor

So, the list is rendered as just text initially, and then you double-click on a row to make it editable. (and then you click again to set the focus that you just lost.)
I’m not sure I like this. I would prefer it if the user could just click and type.
However, if a regular click created an editor row with the focus inside a field, we would lose the ability to navigate with the arrow keys, so maybe I’ll learn to accept it.

The editor-row gets a set of Save/Cancel buttons below it, and these have some problems;

  1. They’re easy to miss. Tiny buttons that don’t stand out against the text they overlay.
  2. If the list is scrolled to the right, the buttons aren’t even visible.
  3. If your list fills the page and you make the bottom visible row editable, the buttons aren’t visible either.

An extension of (1) is that it is easy to think that the application is “frozen”… An editable row looks quite similar to a non-editable row, and the buttons are easy to miss. If you the try to click on another row, or scroll the list vertically, nothing happens…

When I tested this I managed to get the rows out of sync as well; Ie I double clicked on one row to edit it, and the editor-row was placed over the row above. When I clicked Save, the changes ended up in the right row, but it was confusing.
When I got out of sync, it stayed out of sync.


The editor row is a FieldGroup, which I’m not sure I like…
The only place I use a FieldGroup in my application, I set buffered==false, so that as soon as a value is parsable I get it into my data structure where I can process it further.
It doesn’t seem like I can do this with the FieldGroup that wraps the editor row.
Of cource, if I could set the FieldGroup to buffered==false, the “Save” and “Cancel” buttons would have to be replaced with an “OK” button, or something.

( Come to think of it, I’m unsure why I use a FieldGroup at all in my code. I can probably remove it. )


Well, so far so good…
I’m looking forwards to digging deeper in january.

it is a best Grid Ever