How set value comming from controller after adding record

Hi team,

I am trying to set a value coming from controller after to add a record, but the fields don't update, I am doing it this way:


I am using EJS controls.

Thanks,


3 Replies

SK Sujith Kumar Rajkumar Syncfusion Team August 11, 2021 12:18 PM UTC

Hi Dawo, 
 
Greetings from Syncfusion support. 
 
Based on the query we could see that you are trying to update the Grid edited data in the actionComplete event using ajax response data. We would like to let you know that Grid actions are synchronous and hence will not wait for any async calls. And that is why the data is not getting updated in your case. 
 
So we suggest you to achieve your requirement by cancelling the save action, retrieving the data from server using ajax call and then using the Grid’s addRecord and updateRow methods to add and modify the Grid data(based on server data) respectively. 
 
This is demonstrated and explained in the below code snippet, 
 
var flag = false; 
 
// Grid’s actionBegin event handler 
function actionBegin(e) { 
    // Initially flag needs to be false in order to enter this condition 
    if (!flag) { 
        // Check condition if event is triggered for save action 
        if (e.requestType == "save") { 
            // Current added/edited row data 
            var editedData = e.data; 
            // The default save operation is cancelled and edit closed 
            e.cancel = true; 
            this.closeEdit(); 
            // Here you can send the data to your server 
            var ajax = new Ajax({ 
                type: "GET", 
                contentType: "application/json; charset=utf-8", 
                data: JSON.stringify([editedData]) 
            }); 
            ajax.onSuccess = data => { 
                // Updated data retrieved from server 
                var data = JSON.parse(data); 
                // Flag variable is enabled to skip execution of the above code when grid ends add/edit 
                flag = true; 
                var gridObj = document.getElementById('Grid').ej2_instances[0]; 
                if (e.action == 'edit') { 
                    // Condition executes for edit action 
                    // Row index to be updated is retrieved using its primary key value 
                    // Please ensure the primary key value is not modified for edited data 
                    var rowIndex = gridObj.getRowIndexByPrimaryKey(data["OrderID"]); 
                    // Modified edited data is updated to the Grid 
                    gridObj.updateRow(rowIndex, data); 
                } else { 
                    // Condition executes for add action 
                    // Modified added data will be added to the Grid 
                    gridObj.addRecord(data); 
                }              
            } 
            ajax.send(); 
        } 
    } 
} 
 
// Grid’s actionComplete event handler 
// Triggers after an action is successfully completed in the Grid 
function actionComplete(e) { 
    if (e.requestType === "save") { 
        // The global flag variable is disabled after operation is successfully performed so that it can enter the condition on next execution 
        flag = false; 
    } 
} 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 



DA Dawo August 13, 2021 02:31 AM UTC

Hi Sujith,

Thank for your help, I tried your code but doesn't work could you share some complete example?

Thanks,



SK Sujith Kumar Rajkumar Syncfusion Team August 13, 2021 10:46 AM UTC

Hi Dawo, 
 
Please find the below sample prepared based on your query for your reference, 
 
 
If you are still facing problem in achieving your requirement then please share us your complete Grid code file along with the problem that you are facing to validate further on it. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon