Grid ActionBegin async not working

Question

I have a Grid where I need to get some data before actually saving it to the backend. But the code within actionBegin just execute till the end without waiting for the async method to return. How do I make this work.

The data manager is a OdataV4Adaptor.

```

async actionBegin(args: SaveEventArgs) {

console.log("1");

if(args.requestType == "save"{

var getStr = await this.getData("xyz");

console.log("2");

this.userForm.value['hiddenData'] = getStr;

// Other code

console.log("3");

}

async getData(string key): promise<string> {

return new Promise( resolve => {

this.httpClient.Post(this._url, key).subscribe((e: any =>{

resolve(e);

}));

});

}```

Rajapandi Ravi · Accepted Answer

Hi Albert, 

We have analyzed your query and we could see that you like to prevent the default save action and get the record from the server and like to perform the calculation and then save the records to the server. Based on your query we have prepared a sample and we suggest you follow the below way to achieve your requirement. 






export class FetchDataComponent { 
    public data: any; 
    public editSettings: any; 
    public toolbar: any; 
    public flag: boolean = true; 
 
  @ViewChild('grid') 
    public grid: GridComponent; 
 
    ngOnInit(): void { 
        this.data = new DataManager({ 
            url: 'Home/UrlDatasource', 
            updateUrl: 'Home/Update', 
            insertUrl: 'Home/Insert', 
            removeUrl: 'Home/Delete', 
            adaptor: new UrlAdaptor 
        }); 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    } 
 
    actionBegin(args: any) { 
        var parse: any; 
        var getFlag = this; 
        if (args.requestType == "save" && this.flag) { 
            args.cancel = true; //prevent the default save action 
            var row = JSON.stringify({ rowData: [{ OrderID: args.data.OrderID }] }); 
            var ajaxObj = new Ajax(); 
            ajaxObj.type = 'POST'; 
            (ajaxObj as any).contentType = 'application/json'; 
            ajaxObj.url = '/Home/SelectRecord'; 
            ajaxObj.data = row; 
            ajaxObj.send().then(function (value: any) { 
                getFlag.flag = false; 
                parse = JSON.parse(value);//get the returned value here before saving the record and you can perform your calculation here 
                var grid = (document.getElementById('Grid') as any).ej2_instances[0]; 
                grid.endEdit(); //call the endEdit() to save the modified record. It will trigger the Server side Update() method 
            }); 
             
        } 
    } 
 
    actionComplete(args: any) { 
        if (args.requestType == "save" && args.action == "edit") { 
            this.flag = true; 
        } 
    } 
 
} 


Sample: https://www.syncfusion.com/downloads/support/forum/164372/ze/164372-763406742.zip 

Regards,Rajapandi R

Shalini Maragathavel · Answer

Hi Albert, 
Thanks for contacting Syncfusion support. 
By default in EJ2 Grid the actionBegin event is the synchronous function, so we cannot handle any asynchronous function and you cannot perform asynchronous operation in the actionBegin event. Please share the below details that will be helpful for us to check the feasibility of your requirement and provide a better solution based on that.  

1) What action do you need to perform in the Grid before saving the edited record.  2) Do you need to avoid the save operation until the data returned from the backened? 

3) Share us your exact requirement scenario with detailed description. 

Let us know if you have any concerns. 
Regards, 
Shalini M.

Albert K · Answer

Hi Albert, 
Thanks for contacting Syncfusion support. 
By default in EJ2 Grid the actionBegin event is the synchronous function, so we cannot handle any asynchronous function and you cannot perform asynchronous operation in the actionBegin event. Please share the below details that will be helpful for us to check the feasibility of your requirement and provide a better solution based on that.  

1) What action do you need to perform in the Grid before saving the edited record.  2) Do you need to avoid the save operation until the data returned from the backened? 

3) Share us your exact requirement scenario with detailed description. 

Let us know if you have any concerns. 
Regards, 
Shalini M. Thank you and sorry for the late reply.  I did not notice that you have replied earlier.  1) I need to get some data from another URL.2) The data returned will be used to do calculation for the changes done on the grid (edit)3)  What I need is on Save of Edit (save button from the default Grid ToolBar).  Before the actual save to grab/get data from another website/Url, wait for it to return then use that data to apply a calculation to the Row that is being saved, store the result in a hidden column then save the row to the backend.I hope that there is a viable solution to my scenario.  Thank you again.