POSTing to an API during GridEdit Dialog Save process

[Salil Moses]

I Require the following behavior when Adding a New Row from the Grid Edit Dialog :

When I click on the 'Save' button in the Grid Edit Dialog :
The new Row data (args.rowData)  is posted to an external API.  (At this stage new Row data does not have an Id)

This API will save the posted new Row data and return a JSON object that contains the Id, Number (etc) of the newly added object.

The property values of the newly added object(Id, Number, Details etc) should now be reflected in the args.rowData and be visible in the Grid

*******************************************************************************************************************

I am trying to POST the new row Data using the 'actionBegin' event, by making an AJAX call within this event. However, the 'actionComplete' event always fires

before the AJAX call returns. As a result the Grid always shows the same data that I have entered into the dialog entry fields. As mentioned above, I require that the data from the dialog entry fields must be replaced by the values from the JSON object returned by the AJAX call and this ajax data should be visible in the Grid

Sample is at : http://jsplayground.syncfusion.com/vgzmbytk

[Ajith Govarthan]

Hi Salil, 

Greetings from Syncfusion. 

We have checked the attached sample and able to reproduce the reported issue. By default in EJ2 Grid the actionBegin event is a Synchronous function, so it will not wait for the ajax success or failure to perform other operation. 

To overcome the issue we have set cancel argument as true to stop the further execution of the action begin event. So the actionComplete event will not be called and the used AJAX function’s done will be called here we have taken the result data and stored them.  

To save the data in Grid we suggest you to use endEdit method of EJ2 Grid. This method will again triggers the actionBegin with request type as save and we have updated the ajax results in the data argument. We also used a flag variable to call the ajax only once. For your convenience we have attached the sample so please refer the sample for your reference. 

Code Example: 

actionBegin: function(args){ 

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

var savedData = {}; 

/*For Testing ONLY, simple AJAX call to retrieve data from API 

We need to Replace args.rowData with the new Row returned from 

the Server 

*/ 

if(flag){ 

args.cancel = true; 

$.when(GetDataFromApi()).done(function (retData) { 

flag = false; 

console.log(retData); 

savedData = retData; 

/*REPLACE EXISTING ROW DATA WITH DATA FROM API HERE*/ 

tempData.Id = savedData.id; 

tempData.TkNumber =  "#" + savedData.id; 

tempData.TkHeader = savedData.title; 

tempData.TkDetails = savedData.body; 

var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

grid.endEdit(); 

//console.log(rowData); 

});  /*End of when done*/ 

} 

if(!flag){ 

args.data.Id = tempData.Id; 

args.data.TkNumber = tempData.TkNumber; 

args.data.TkHeader= tempData.TkHeader; 

args.data.TkDetails = tempData.TkDetails; 

} 

} /*End save*/ 

} 

Sample Link: http://jsplayground.syncfusion.com/omtemkte 

Documentation Link: https://ej2.syncfusion.com/documentation/api/grid/#endedit 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Salil Moses]

Hi Ajith,

Nicely done,  Thanks for the working sample

[Prasanna Kumar Viswanathan]

Hi Salil, 

 

We are happy to hear that your issue has been solved. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V