Enhanced Crud

Enhanced CRUD offers read only mode, canceling save and access to Editor buttons

View larger

Close

Enhanced CRUD is an improved version of the Vaadin CRUD component. The most notable differences are

Features

• Toolbar footer can be hidden

• There is read only mode, where Editor dialog has only the close button and data cannot be edited

• A new PreSaveEvent is triggered before bean is committed, so that fully customized saving logic is possible to be added.

• Cancel save. You can do additional validation in save listener and cancel if needed. Then edits are reverted.

• Access to Editor dialog buttons. Button captions can be changed, buttons can be hidden.

• Possible to disable confirm dialog on cancel actions

Fixes

• event.getItem() returns new item if opened with new item, https://github.com/vaadin/vaadin-crud-flow/issues/204

• Possible NPE: "Cannot provide an id for null item.", https://github.com/vaadin/vaadin-crud-flow/pull/216

This component requires Vaadin 14+ and npm mode. Compatibility mode not supported. Material theme is not supported.

Vaadin 23

There is no version planned for Vaadin 23. Important features from this add-on has been integrated to CRUD component of Vaadin 23 instead.

Vaadin Pro

This component is available in the Vaadin Pro subscription. It is still open source, but you need to have a valid VCL license in order to use it. Read more at: Pricing

Sponsored development

Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

Crud<Person> crud = new Crud<>(Person.class, createPersonEditor());
PersonDataProvider dataProvider = new PersonDataProvider();

crud.setDataProvider(dataProvider);

// Use cancelEdit in PreSaveEvent
// PreSaveEvent is dispatched before editor writes the bean
crud.addPreSaveListener(e -> {
	BinderCrudEditor<Person> crudEditor = (BinderCrudEditor<Person>) crud.getEditor();
	TextField textField = (TextField) crudEditor.getBinder().getFields().findFirst().get();
	if (textField.getValue().equals("noname")) {
		crud.cancelSave();
 }
});
crud.addSaveListener(e -> {
    dataProvider.persist(e.getItem());
});
crud.addDeleteListener(e -> dataProvider.delete(e.getItem()));

crud.getGrid().removeColumnByKey("id");
crud.addThemeVariants(CrudVariant.NO_BORDER);

// Toggle display of toolbar
Button hideToolbar = new Button("Hide toolbar");
hideToolbar.addClickListener(buttonClickEvent -> crud.setToolbarVisible(!crud.isToolbarVisible()));

// Set the whole Grid and Editor to be read only, in this mode
// dialog is also not editable and show only close button
Button readOnly = new Button("Read only");
readOnly.addClickListener(buttonClickEvent -> {
    crud.setReadOnly(!crud.isReadOnly());
});

// There are getters for the buttons, so that they can be modified
// individually
Button changeEditorButtons = new Button("Change Editor Buttons");
changeEditorButtons.addClickListener(buttonClickEvent -> {
    crud.getDelete().setText("Restore");
    crud.getCancel().setText("Quit");
    crud.getSave().getElement().setAttribute("Style", "display: none;");
    crud.getCancel().addClickListener(clickEvent -> crud.setToolbarVisible(!crud.isToolbarVisible()));
});

// Remove edit column and open editor by click listener
Button changeEditorOpening = new Button("Change Editor Opening");
changeEditorOpening.addClickListener(buttonClickEvent -> {
	crud.setEditOnClick(!crud.isEditOnClick());
});

// There are getters for the buttons, so that they can hidden 
// individually
Button disableDelete = new Button("Disable Delete");
disableDelete.addClickListener(buttonClickEvent -> {
    crud.addEditListener(event -> {
        crud.getDelete().setVisible(false);
    });
});

Links

• Edit

Compatibility