Hi Ketan,
Thanks for contacting Syncfusion support.
Query: In beforebatchSave event I want to fire a POST API request and on
failure I want to set e.cancel = true and on sucess I want to allow grid update
to complete. Is it possible to acheive?
Yes, you can achieve your requirement by using a flag variable
in the beforeBatchSave event. Initially, we set the flag variable
as false. When you save the changes, the beforeBatchSave event
will be triggered. In that event, we execute args.cancel as true if the flag
variable is false and post the request to the server.
In the success event of the post, we make the flag variable
as true and save the data in Grid by executing the batchSave
method. Find the below code example and sample for your reference.
beforeBatchSave: https://ej2.syncfusion.com/angular/documentation/api/grid/#beforebatchsave
batchSave: https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#batchsave
batchCancel: https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#batchcancel
actionComplete: https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete
|
[app.component.ts]
export class AppComponent {
public isReadyToSave: boolean = false; //
initialize the flag variable
beforeBatchSave(args) {
// triggered before the save action occurred in grid
console.log(args);
if (!this.isReadyToSave) {
args.cancel = true;
// prevent the save action based on the flag
variable
this.grid.showSpinner();
var ajax = new Ajax('https://ej2services.syncfusion.com/production/web-services/api/Orders','GET');
ajax.send(); // send the post to server
ajax.onSuccess = (data: string) => {
this.isReadyToSave = true;
// make the flag variable as true if the post is
successive
this.grid.editModule.batchSave();
// save the changes to Grid
alert('Post successive');
};
ajax.onFailure = (data: string) => {
this.grid.editModule.batchCancel();
// discard the changes
alert('Post Failure');
};
}
}
actionComplete(args) {
if (args.requestType == 'batchsave') {
// triggered after saving the batch edited records in grid
this.isReadyToSave = false;
}
}
}
|
In the actionComplete event (requestType as batchsave), we make
the flag variable as false to perform next save operation.
Sample: https://stackblitz.com/edit/angular-7n5add?file=app.component.html,app.component.ts
Please get back to us if you need further assistance.
Regards,
Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that
other members can locate it more quickly.
