Prevent grid to save data after edit

[Domantas]

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".

[Venkatesh Ayothi Raman]

  

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. 

[Domantas]

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.

[Venkatesh Ayothi Raman]

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: 

https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#setrowdata 

https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#actionbegin 

 

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/BulkUpdate1081958920 

Regards, 

Venkatesh Ayothiraman. 

[Shivani]

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?

[Sujith Kumar Rajkumar]

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, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154710/ze/GridUpdatedSample264403865  

Let us know if you have any concerns. 

Regards, 

Sujith R