1. Home
  2. Forum
  3. Angular - EJ 2
  4. Prevent grid to save data after edit

Prevent grid to save data after edit

Hello,

Applied "Normal" editing mode to a grid and I'm getting an issue with saving. When I edit data in a row and then deselecting it, grid starts to take action and wants to save it and sends the request to back-end. I need to make savings manually by myself but I couldn't find where i can disable this request. Tried applying return in ActionBegin but that didn't work. 

Query: How to prevent Save/Update or any other action when editing grid


It also deletes the row data, cause it replaces back-end request with row data. This issue doesn't appear in "Batch" mode, only in "Normal".


5 Replies
VA Venkatesh Ayothi Raman Syncfusion Team June 6, 2018 03:26 PM UTC

  
Hi Domantas, 

Thanks for using Syncfusion products. 

We have unclear about your requirement, so could you please share the following details? 
  1. Would you like to prevent the save operation while de-select operation and open the edited state for another row?
  2. Are you want to edit the multiple rows and save the bulk changes?
It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 
Venkatesh Ayothiraman. 


DO Domantas June 7, 2018 05:59 AM UTC

I want to do a bunch of changes in grid, have changed data in array or something and then save them manually, lets say on button click. The save method should be called only when i call it, not after some changes, deselection or anywhere else.


VA Venkatesh Ayothi Raman Syncfusion Team June 8, 2018 02:02 PM UTC

Hi Domantas, 


Thanks for the update. 

We have achieved your requirement using actionBegin event and setRowData API in Grid. In that event, we can prevent default save operation in Grid by enabling the args.cancel property as true. Here, we can push the edited data in the array and cancel the edit.  

 
[actionBegin] 
actionBegin(args: any) { 
 
 
        if (args.requestType == 'beginEdit' && this.bulkUpdate) { 
 
            let length = this.bulkUpdate.length; 
            for (let i = 0; i < length; i++) { 
                if (this.bulkUpdate[i].OrderID == args.rowData.OrderID) { 
 
                    args.rowData = this.bulkUpdate[i]; //change the args.rowData with our modified data 
                } 
            } 
             
        } 
        if (args.requestType == 'save') { 
           
            args.cancel = true; //cancel the default edit operation 
            let length = this.bulkUpdate.length; 
            let flag = false; 
            for (let i = 0; i < length; i++) { 
                if (this.bulkUpdate[i].OrderID == args.data.OrderID) { 
                    flag = true; 
                } 
            } 
            if (!flag) { 
                this.bulkUpdate.push(args.data); 
            } 
            this.grid.editModule.closeEdit(); //cancel the edit 
            this.grid.setRowData(args.data.OrderID, args.data); // update the edited data in Grid while click on the another cell 
             
        } 
    } 
 
Help documentation: 
 

After editing the rows, we can send the bulk save request to server side while click the button like as follows, 

[buttonClick] 

myFunc(): any { 
         
    
        let ajax = new Ajax("/Home/BulkSave", "POST", true); // call API 
        ajax.send(JSON.stringify(this.bulkUpdate)).then( 
            (data) => { 
                //do stuff 
                this.bulkUpdate = []; //here empty the bulk edit array 
            }); 
    } 
 
[Controller] 
 
  public ActionResult BulkSave([FromBody] List<OrdersDetails> value) { 
            //do stuff 
            return Json(value); 
        } 


We have also prepared a sample for your convenience which can be download from following link, 




Regards, 
Venkatesh Ayothiraman. 


SH Shivani May 29, 2020 04:29 AM UTC

Hello,
this one we can achieve when we click inside the grid only. -- args.requestType == 'save'
Once we edited the record and directly click on the "button click" (manual button) then we can't get an edited record.
Like if the user edited record and doesn't click on the Data Grid or anywhere in the Grid then how can we get edited record?

SK Sujith Kumar Rajkumar Syncfusion Team June 1, 2020 12:10 PM UTC

Hi Shivani, 

As explained in this forum – 154710, you can get the added/edited data on custom button click/toolbar custom item click from the form object of the Grid’s edit module. This is demonstrated in the below code snippet on custom toolbar button click, 
 
// Grid’s toolbarClick event function 
clickHandler: function(args) { 
        if (args.item.id === 'custom-save' && this.$refs.grid.ej2Instances.editModule.formObj) { 
            var newVal = []; 
            // Gets the input elements of the newly added row 
            var inputElements = this.$refs.grid.ej2Instances.editModule.formObj.inputElements; 
            // The value of each input element is stored with their field name in ‘newVal’ variable 
            inputElements.forEach(x => newVal[x.name] = x.value); 
            console.log("Added data: " + newVal) ; 
        } 
} 

Sample for your reference, 
 

Let us know if you have any concerns. 

Regards, 
Sujith R 


Loader.
Up arrow icon