Grid and multi-line editing

Vaadin 6 / 7 / 8
1

Hi,

If I have understood the grid correctly, one must double click on every row, make the changes and then save. I have an application where it would be advantegous to make multiple changes to the values and then “batch save” them. Any way this can be achieved?

Thanks in advance,
Nik

2

There is another editing mode in Grid in the upcoming Vaadin 7.6. See e.g.
http://vasa.demo.vaadin.com/grid-unbuffered/
. Sounds like it could be what you are looking for

3

Thanks for the tip, looks like it’s been released. How do you use the feature? I tried setEditorBuffered(false) and doing editItem() for all items but the rows only go into edit mode one at a time (and I don’t see the lower button row)…

4

There is a special addon for you. Look at demo application inside

https://vaadin.com/directory#!addon/transactional-container-add-on

Looks like it’s the thing you are looking for.

5

Unfortunately, it’s a bit unclear to me how the transactionality of the container relates to the edit mode of the grid.

6

With both buffered=false and buffered=true, you only get editor-fields for one row at a time.

The difference is that with buffered=false, you don’t get the save/discard buttons. You can freely move the editor-row around, and the changes you do in each field are sent to the property at once, allowing you to react to changes.

If all cells were rendrered as proper input fields all the time, the theory is that it would be very slow. It is with Table anyway, especially with IE. (Strangely enough the framework we had before Vaadin managed this just fine.)
It is not possible anyway to actually edit multiple rows at a time, so to just render one row at a time as editable is imho a more or less sensible optimization.

Unfortunately the UX is not great.

To make it more usable we have had to do the following, amongst other things:

  • Styled our grid so that cells that will be editable once you open the editor on that row, are shown with a white background and a black border. (or grey, if editable but currently disabled)
  • Let the editor open on single-click instead of on double-click
  • Use a clickable checkbox renderer, so that we can click on a checkbox on any row, without first having to move the editor.
  • Removed the row-selection checkbox and implemented standard ctrl/shift-selection of rows.
  • Calculate a fixed width for all columns, to avoid columns jumping around when we scroll.
  • Added a custom client-side EventHandler so that we can move the editor up/down with arrow key up/down.
  • ( Also meant we had to hack the date selector widget to open its date panel with Alt-down instead of -down )

With this in place we finally have (most of) what we had with Table, and can switch our application to Grid.

7

http://vasa.demo.vaadin.com/grid-unbuffered/ appears to be running in some sort of multi-edit state (hold checkbox). Or is it just in view-mode with the Hold-column rendering as a checkbox?

My usecase would be

  1. The grid can be in view mode (Label) or edit mode (TextField)
  2. Depening on the row object state, some fields are read and others are read-write.

as orders in certain state (approved) can not be edited at all while open orders can have rows that are either “normal” (amount can be edited) or templated (amount is always 1)

wonder if it can be done with the new Grid…?

8

Hello Nicklas,

I think you can achieve something like that using TextFieldRenderer from Grid Renderers collection For Vaadin7 add-on: https://vaadin.com/directory#!addon/grid-renderers-collection-for-vaadin7

See the attached screenshot. With TextFieldRenderer you can use tab to jump from textfield to the next one. After editing, it should be possible remove the renderers, to go back to the non-edit mode by calling setRenderer(null) for columns that has TextFieldRenderer. But, it probably needs some client side customizations to set only part of the visible rows into the editable mode…
22723.jpg