Prevent the grid from saving when the tab key is pressed in the last column

[Jesse Cates]

In release 20.2, the grid keyboard functionality was changed so that when you press the tab key while in the last column of the row, it saves the row that's being edited. We don't want it to do this. How can we revert to the previous functionality, where pressing the tab key will just move focus without saving the grid row?

[Aishwarya Rameshbabu]

Hi Jesse Cates,

Greetings from Syncfusion support.

Upon reviewing your inquiry, we have observed that you prefer not to save records when moving the focus out of the last column of an edited cell of the Grid. In the latest package version of Syncfusion, by default, the row is automatically saved when the focus is moved out of the last column of the edited cell. To meet your requirement, we have implemented a solution at the sample level by setting the args.cancel as true when the args.requestType is save in the actionBegin event using a flag variable in the keyPressed event of the Grid. Please refer to the code example and sample provided below for more detailed information.

    keyPressed(args: any) :void {

        let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];

        let targetElement = args.target.closest('td');

        if (targetElement && ((targetElement.closest('td').cellIndex + 1)) === gridInstance.getVisibleColumns().length) {

            this.flag = true;

        }

    }

    actionBegin(args: any) :void {

        if (args.requestType === 'save' && this.flag) {

           args.cancel = true;

           this.flag = false;

        }

    }

 

Sample: https://stackblitz.com/edit/angular-pwepxy-pes9rh?file=src%2Fapp.component.ts,src%2Fapp.component.html

If you need any further assistance or have additional questions, please feel free to let us know.

API References:

actionBegin

keyPressed

Regards

Aishwarya R