Kendo-angular: Grid editing : Enter doesn't trigger the save

[Neaco]

I'm submitting a...

• Bug report
• Suggestion for improvement

Current behavior

Pressing Enter when editing a row doesn't trigger the save command.

Also, if the grid itself is inside a form (as a formArray for Reactive forms for example), it will trigger the form's submit.

Expected behavior

When focused on an editable cell, pressing Enter should trigger the save button for that row.

Minimal reproduction of the problem with instructions

Browser:

• Chrome (desktop)
• Firefox

[tsvetomir]

The behavior you're describing is very similar to how In-Cell Editing works. Have you considered using it instead?

The In-Line Editing behavior follows the WAI-ARIA recommendations for Editing and Navigating Inside a Cell. That said, we can handle the keydown event to implement the described behavior:

// <kendo-grid #grid (keydown)="onKeydown(grid, $event)" >

public onKeydown(sender: any, e: any) {
  if (e.key !== 'Enter') {
    return;
  }

  if(!this.formGroup || !this.formGroup.valid) {
    return;
  }

  if (e.target.tagName.toLowerCase() === 'input') {
    const product: Product = this.formGroup.value;
    const isNew = this.editedRowIndex === undefined;
    this.editService.save(product, isNew);

    this.closeEditor(sender);

    // Stop parent form from submitting
    e.preventDefault();
  }
}

See the updated example in plunkr.

[Neaco]

Hello and thanks for the answer.

I should have been more precise, the grid will be mainly used for new lines, in which case the in-cell editing example also uses in-line editing.

I see that it is the WAI-ARIA recommendation and not a bug, but

may either restore grid navigation functions or move focus to an input field in a neighboring cell

the move focus the second option seems more coherent with the in-line Editing.
I'll just use keydown, thanks for the plunkr.

[tsvetomir]

Focusing the next cell is even easier with the focus* methods:

    public onKeydown(sender: any, e: any) {
      if (e.key !== 'Enter') {
        return;
      }

      if (e.target.tagName.toLowerCase() === 'input') {
        sender.focusNextCell();
      }
    }

See plunkr.