How to edit in Vaadin 10 Grid?

Flow
1

Is there a way to edit data in a Vaadin 10 Grid?
Something like Vaadin 8 Grid buffered unbuffered mode?

Thx in advance

Alex

2

No plans?
What are alternatives?

3

Vaadin 8 Grid buffered unbuffered mode?

In Vaadin 10 Grid there is not similar integrated editor as in Vaadin 8 Grid.

If you want to edit data withing Grid there are couple of options. You can render e.g. TextFields in the Grid or you can use the details. See the documentation here (near bottom of the page, sections Using Components and Showing Item Details)

https://vaadin.com/docs/v10/flow/components/tutorial-flow-grid.html

4

Hi,
Are there any plans to add the some functionallity for editing in V10+? Like we have in V8. I found it very useful in one example and now we will build new app in V8 because of that.

5

There seems to be an [Editor]
(https://github.com/vaadin/vaadin-grid-flow/tree/master/src/main/java/com/vaadin/flow/component/grid/editor) again in Vaadin 12.0.3 but I can’t really make it work. Is this Editor working yet? If yes, is there documentation on it? are there examples?

I tried to get it to work by myself but I failed. This is what I tried:

grid.getEditor().addSaveListener(editorSaveEvent -> {
    // save item and refresh
	grid.getDataProvider().refreshItem(itemRepository.save(editorSaveEvent.getItem()));
}

getColumnByKey("name").setEditorComponent(item -> {
	TextField editorField = new TextField();
	editorField.setValue(item.getName()); // let the editor component have the same value as the current value
	editorField.setWidth("100%");
	return editorField;
});

// edit row btns
grid.addColumn(new ComponentRenderer<>(item -> {
	Button editBtn = new Button("Edit", VaadinIcon.EDIT.create());
	Button saveBtn = new Button("Save Edits", VaadinIcon.DATABASE.create());
	editBtn.addClickListener(click -> {
		//saveBtn.setVisible(true);
		//editBtn.setVisible(false);
		grid.getEditor().editItem(item);
	});
	saveBtn.addClickListener(click -> {
		//saveBtn.setVisible(false);
		//editBtn.setVisible(true);
		grid.getEditor().save();
	});

	editBtn.setWidth("100%");
	saveBtn.setWidth("100%");
	//saveBtn.setVisible(false); show both buttons until this issue gets answered: https://vaadin.com/forum/thread/17472233/grid-componentrenderer-issue-with-button-clicklisteners-within

	HorizontalLayout editLayout = new HorizontalLayout(editBtn, saveBtn);
	editLayout.setWidth("100%");
	return editLayout;
}))
		.setKey("edit")
		.setHeader("Edit")
		.setFlexGrow(0)
		.setWidth("300px")
		.setId("edit");

The command grid.getEditor().editItem(item); does show editorComponents on columns where I defined them.
The command grid.getEditor().save() has no effect, the editocComponents are still visible, and the saveListener is not invoked.

6

I am new to vaadin-10/12 versions and previously we used vaadin-7/8 versions, Now we planning to upgrade vaadin-12 version of all our applications. But we facing following problems with vaadin 12 version Grid :

I have created application with using vaadin-12 grid and no.of records i added in the grid 100/1000/10000/100000.

1) Basic grid and lazy loading grid without renderers is working perfectly ( which takes very less then 1 sec of all cases like 100/1000/10000/100000 ) , But i have problem with component-renederer with 100/1000/10000/100000 records:

3 normal columns + 3 TextBox columns and it takes around 1 second.

3 normal columns + 3 CheckBox columns and it takes around 1 second.

3 normal columns + 3 ComoboBox columns and it takes around 2 second.

columns : Three TextBox + Three CheckBox + Three ComoboBox = it takes around 3 second.

Actual my requirement is i want to show more then 10000 records with using component-renderer with in second.

It is any possibility to show 10000 records with in second?

**2)**Basic grid (without renderers) problem with selectAll feature:

I added 1000 records and apply selectAll it takes 9 secs .

Any performance problems with select-all and component renderer features ?

Note : Same functionality tested lazy grid and it takes same time and we checked dom elements only visible elements rendered on the browser.

Thanks,

Amar Bogari

7

Regarding the Editor in Vaadin 12.0.4 version, the saveListener is not being invoked just like Kaspar Scherrer is saying. I have a temporary dirty solution by using Binder on TextField and then when save button’s clickListener is called just binder.writeBean(editUser) to load the changes (this validates the edit as well). After that just load the bean from binder and save it to your backend.

saveBtn.addClickListener(click ->
			{
				User editUser = new User();
				try
				{
					binder.writeBean(editUser);
					userService.update(editUser);
					refreshContent();
				} catch (ValidationException e)
				{
					Notification.show(e.getMessage());
				}
				editor.save();
			});

For more information see [https://vaadin.com/releases/vaadin-12#grid-inline-editing]
(http://)

8

the saveListener is not being invoked just like Kaspar Scherrer is saying.

I think this issue is not reported in github.com/vaadin/vaadin-grid-flow/issues , but it should be there including your workaround.

9

I’m having the same problem using Vaadin 12.0.6, the saveListener is called, but the editorComponents do not disappear. I created an issue for this matter: https://github.com/vaadin/vaadin-grid-flow/issues/568