DataGrid inline editor validation

Support
#1

Hello,

I am currently trying to use the DataGrid inline editor both buffered and non buffered.

I would like to control better the validation message and styling of the impacted field.

Screenshot 2021-04-13 at 21.04.13

How can I remove the footer row that is showing the validation error? I would like to use notifications to show validation messages?

Also I am wondering how to change the styling of the field that has validation problem? I would like to remove the red background colour for example?

Thanks,
Samy

#3

Hello,

Take a look at EditorPreCommitEvent (see Usage of DataGrid inline editor). There you can perform validation and show notification:

@Subscribe("ordersDataGrid")
public void onOrdersDataGridEditorPreCommit(DataGrid.EditorPreCommitEvent<Order> event) {
    Collection<Field> fields = event.getFields().values();
    StringBuilder errorMessage = new StringBuilder();
    for (Field field : fields) {
        try {
            field.validate();
        } catch (ValidationException e) {
            errorMessage
                    .append(e.getDetailsMessage())
                    .append("\n");
        }
    }
    notifications.create(Notifications.NotificationType.TRAY)
            .withCaption("Validation exception")
            .withDescription(errorMessage.toString())
            .show();
}

Using styles you can change color and hide the error message:

.custom-editor-datagrid {
  .v-grid-editor-message > div {
    opacity: 0;
  }
  .v-grid-editor-cells .error,
  .v-grid-editor-cells .error > input {
    background-color: #bbdfff;
  }
}
1 Like
#5

Thanks Roman for the answer.

I tried it and this is what I have now.

Screenshot 2021-04-15 at 11.26.28

As you can see I have both the inline and tray validation errors. How can I get rid off the inline editor error showing at the same row as “Ok” and “Annuler” buttons?

#6

Try to add this style to your DataGrid.

 <dataGrid id="dataGrid"
           stylename="custom-editor-datagrid"
           ...>

To use styles you need to extend a theme: 3.5.9.2. Extending an Existing Theme.

#7

I did exactly that, somehow this is not working.

Wouldn’t it be possible to unwrap the DataGrid to get the inline editor grid and remove the footer row?

#8

Unfortunately, inline editor does not provide access to the footer row.

Also, try to refresh page (CTRL-F5 in Chrome on Windows), browser may cache styles.

#9

Refreshing didn’t help. The behaviour is somehow unpredictable, when I a create a product the field “code” gets the focus, when I tab to the next field I get the validation error correctly and the background colour doesn’t change to red (this is correct behaviour).

However when I input something in the “code” field and I delete it, and then I tab to the next field, I get the validation error (which is correct) but then the background colour of the field changes to red.

I attached a sample project, I hope it helps to spot the issue.

datagrid.zip (97.6 KB)

#10

Move your styles to the @mixin com_company_datagrid-halo-ext {} code block otherwise styles won’t work.

#11

That helped for styling the field.

However I still don’t understand why I have different styles if press the key ENTER or if I press the tab key? When pressing enter, I get the the background to red but when I press tab, there is no background. In both situations I get the notification validation message.

#12

DataGrid Editor handles enter press action and performs validation. As the “Code” field is required Editor sets to its connector error state. However, when the Tab key is pressed you perform validation in blur event but the error state is not set.
You can manage it by adding/removing styles from the field, for instance:

try {
    field.validate();
    field.removeStyleName(EDITOR_ERROR_FIELD_STYLENAME);
} catch (ValidationException e) {
    notifications.create()
            .withCaption(e.getMessage())
            .withType(Notifications.NotificationType.TRAY)
            .show();
    field.addStyleName(EDITOR_ERROR_FIELD_STYLENAME);
    field.focus();
}

.custom-editor-datagrid .v-grid-editor  .grid-editor-error-field {
  background-color: #bbdfff;
}

See reworked demo: datagrid.zip (98.1 KB)

1 Like
#13

Thanks Roman,

This is bringing me closer to my target solution. The behaviour of the DataGrid validation is interfering with the Editor and field validation.

On the creation of the Product, the code gets the focus in the inline editor which is correct. But if I click with the mouse again on the field being edited, it triggers the validation and shows the error message.

I would like to remove validation fired by the DataGrid in order to prevent this behaviour, but I didn’t find a way the API doesn’t provide access to the validators. Also when clicking on the cancel of the editor, it also trigger the validation.

#14

Unfortunately, you cannot disable validation by the DataGrid editor. DataGrid fires validation when the user presses the “enter” key, clicks on the OK button, and if the field value is changed.

When the user clicks on the field Vaadin tries to focus editor cell, Blur event is fired, and then Vaadin focuses TextField. I’m not sure is there a workaround for this.

Probably, validation is triggered due to the field loses focus and blur listener is invoked.

#15

Hi Roman,

Thanks for your valuable help so far.

I cam to the conclusion that I cannot use the DataGrid in a way that is convenient.

I will implement the task using the traditional browse/edit screens, although from UX perspective it is not the best approach.

Samy