Inline edition how to disable auto save.

[JoseAn Fed]

Hi, I am using the inline edit feature on a grid (angular application v.17), and I noticed that, in edition mode (GridComponent.isEdit = true), any click on a different row than the current one performs eventually a save event as well as clicking outside the grid becomes a cancel. I understand this is the regular behavior but, can the grid be blocked and allow saving or cancelling by clicking only on the appropriate buttons,?.

I tried by adding a listener to the mouseUp event of the grid for unwiring the events when the user clicks on the grid (GridComponent.unwireEvents()) and wire them again when the save or cancel buttons are clicked (GridComponent.wireEvents()) so the click event is not handled and don't raises a saving event, but sometimes if the clicking is faster than the unwire operation, saving is still raised. So, the question is if there is a better way to get this?.
Thanks so much in advance, any help will be appreciated. 

[Sivaranjani Rajasekaran]

Hi JoseAn Fed,

Greetings from Syncfusion support,

Based on your requirement, we have prepared a sample to meet your needs. In this sample, the toolbar includes an Update button, and the edited record will only be saved when this button is clicked.

We initialized a boolean variable, isUpdate, as false. Using the actionBegin event of the Grid, we prevent the default save action by setting args.cancel to true when the requestType is save. In the toolbar button click event, we update the boolean variable and call the endEdit method of the Grid to save the data.

Please find the code example below for your reference:

Code Example : 

toolbarClick(args: any): void {

    if (args.item.id === `${this.grid.element.id}_update`) {

      this.isUpdate = true;

      this.grid.endEdit();

    }

  }

  actionBegin(args: any): void {

    if (args.requestType === 'save') {

      args.cancel = !this.isUpdate;

      this.isUpdate = false; // Reset after handling the save operation

    }

  }

Sample Link : https://stackblitz.com/edit/f3meyehh?file=src%2Fapp.component.html,src%2Fapp.component.ts

Documentation Link : 

1. Editing : https://ej2.syncfusion.com/javascript/documentation/grid/editing/in-line-editing

API Reference : 

1. actionBegin
2. endEdit

Please get back to us if you need further assistance.

Regards,

Sivaranjani R.

[JoseAn Fed]

thanks so much  Sivaranjani, 

It helped me so much to fix the problem

[Sivaranjani Rajasekaran]

Hi JoseAn Fed,

You are most Welcome! Please get back to us if you need further assistance.

Regards,

Sivaranjani R.