How disable default Enter key behaviour to go to next row, grid in batch mode

[Tomek Romek]

Hello Syncfusion,

I have a problem with grid in batch mode. I want to start editing cell using enter key.

First problem:

When I press Enter key on selected cell(n) then it opens cell from the next row(n+1) - it happens probably, because firstly enter works as "go to next line", then start editing(my implemented functionality).

Second problem:

When I put new value, I want to save it also using enter key. 

The problem is that when I finish editing and press enter it automatically goes to next row and start editing it.

I think the main problem is default enter behaviour. In normal mode this functionality works properly. Do you have any idea how to resolve it?

  load() {

    this.grid.element.addEventListener('keydown', (e: KeyboardEventArgs) => {

      if (e.key === 'Enter') {

        if ((e.target as HTMLElement).classList.contains('e-rowcell')) {

           if (this.grid.isEdit) {

            this.grid.saveCell();

          }

          const rIndex = Number((e.target as HTMLElement).getAttribute("Index"));

          const cIndex = Number((e.target as HTMLElement).getAttribute("aria-colindex"));

          const i: IIndex = { rowIndex: rIndex, cellIndex: cIndex };

          const field: string = this.grid.getColumns()[cIndex].field;

          this.grid.editCell((rIndex), field);

        }

      }

      if (e.key === 'Escape') {

        this.grid.closeEdit();

      }

    });

  }

[Rajapandiyan Settu]

Hi Tomek, 

 

Greetings from Syncfusion support. 

 

Based on your requirement, you need to edit the focused cell by pressing Enter key and also save the edited record using Enter key without start editing a next row cell. 

 

We have suggested to use keyPressed event of Grid to achieve your requirement. Here, you can prevent the default behavior of Enter key with the Grid by setting the e.cancel as ture. Refer to the below code example and sample for more information. 

 

keyPressed-Grid: https://ej2.syncfusion.com/angular/documentation/api/grid/#keypressed  

 

 

keyPressed(e) { 

    if (e.key === 'Enter') { 

      e.cancel = true;  // prevent the default behavior of enter key with Grid 

      if (this.grid.isEdit) { 

        this.grid.saveCell(); 

      } 

      if ((e.target as HTMLElement).classList.contains('e-rowcell')) { 

        const rIndex = Number((e.target as HTMLElement).getAttribute("Index")); 

        const cIndex = Number((e.target as HTMLElement).getAttribute("aria-colindex")); 

        const i = { rowIndex: rIndex, cellIndex: cIndex }; 

        const field: string = this.grid.getColumns()[cIndex].field; 

 

        this.grid.editCell((rIndex), field); 

      } 

    } 

    if (e.key === 'Escape') { 

      this.grid.closeEdit(); 

    } 

  } 

 

 

Sample: https://stackblitz.com/edit/angular-rhpbrh-sgux9v?file=app.component.ts  

 

Please get back to us if you need further assistance with this. 

 

Regards,  

Rajapandiyan S