Getting access to CHANGED rows in a grid in Batch edit mode.

[Jeff Butterworth]

I am using the grid in Batch edit mode (NOT Normal mode). I have a list of rows. When I change a value in one row, I want to examine all the current rows in the grid to perform some business logic. I need to see the data with the changes in it.

How can I get access to the current data in the grid which has all the changes made to it? This is a list of things I have attempted to do.

- getDataRows and getRows both return a list of elements, not actual data. I had seen examples using getRowObjectFromUID  like this:

self.$refs.datagrid.ej2Instances.getRowObjectFromUID 

But when I try to use it, the browser throws an error saying that getRowObjectFromUID is not found. When I examine the ej2Instances, I can see heaps of functions on there but not  getRowObjectFromUID .

- dataSource is the original list of items I set for the grid and doesn't show me the changes.

- currentViewData has the original list of items as well.

- I thought to manually pull out the changes using getBatchChanges() but I can't find a suitable event for this. If I add it to the "rowSelected" event, that fires too much. When I try to add a row, I get the row added to the grid but then "rowSelected" fires and my code runs and the add goes all weird. What I need is a "endEdit" event that fires *once* when I move out of a row I just changed/added. There is a "beginEdit" event but in batch mode that never fires. And the doco doesn't have anything about an "endEdit". "actionComplete" doesn't have any events firing when I need them to.

In frustration, I thought to switch edit mode from Batch to Normal but then that had its own set of issues and didn't want to head down that path...

Help!

Thanks

Jeff

[Sujith Kumar Rajkumar]

Hi Jeff, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we could understand that your query is to access batch changes in the Grid. You can use the Grid’s cellSaved event(triggers when a Grid cell is saved) where the current edited changes will be returned in the event arguments and the total batch changes can be accessed using the getBatchChanges method to achieve your requirement. 

 

We have prepared a sample to demonstrate this case for your reference. Please find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-r05xf?file=/src/App.vue 

 

API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#cellsaved 

                  https://ej2.syncfusion.com/vue/documentation/api/grid/#getbatchchanges 

 

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

 

Regards, 

Sujith R 

[Padmini Ramamurthy]

From: Jeff Butterworth 
Sent: Tuesday, July 20, 2021 8:28 AM
To: Syncfusion Support <[email protected]>
Subject: Re: Syncfusion Forum [167379] has a new reply - Getting access to CHANGED rows in a grid in Batch edit mode. 

  

This doesn’t quite do what I need.  

My understanding is that the getBatchChanges will only get the rows that are changed. If I have 10 rows in my original data source and I change one of these rows, getBatchChanges will only return that one row. I want to see the 10rows with the changed applied.   

Regards  

Jeff Butterworth 

[Sujith Kumar Rajkumar]

Hi Jeff, 

 

The batch changes method will only return the CRUD changes made in the Grid before it is updated. And the data source will only be updated when the changes are saved in the Grid which is the default behavior. 

 

However you can achieve your requirement of getting the entire data with the changes by retrieving the current data source, the batch changes and updating the changes to its corresponding index of the data source in the Grid’s cellSaved event. 

 

This is demonstrated in the below code snippet, 

 

onCellSaved: function (args) { 

    // Current Grid data source 

    var curData = Object.assign([], this.$refs.grid.ej2Instances.dataSource); 

    // Batch changes 

    var changedRecords = this.$refs.grid.ej2Instances.getBatchChanges().changedRecords; 

    // The batch changes are updated in the retrieved Grid data source 

    changedRecords.forEach((dat) => { 

        var index = this.$refs.grid.ej2Instances.getRowIndexByPrimaryKey(dat["OrderID"]); 

        curData[index] = dat; 

    }); 

    console.log(curData); 

} 

  

Please find the below updated sample for reference, 

 

Sample: https://codesandbox.io/s/vue-forked-fb7mz?file=/src/App.vue 

 

Note: This approach will work only when local data is bound in the Grid. So for remote data, you need to either retrieve the entire data from your server method and perform the above action or use the currentViewData if only current page data is needed. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Jeff Butterworth]

Hi  Sujith

I would have preferred something where I didn't have to do any work :-) but its a workable solution.

Thanks for your help

Cheers

Jeff

[Praveenkumar Gajendiran]

Hi Jeff,  

 

By default, the getBatchChanges() method return the row values only what you changed in the Grid records. We are unable to return all the dataSource values in the getBatchChanges() directly. Also, when will beusing the remote data in Grid, the Grid will be displayed only current page records(on-demand concept) , so we are unable to get the Grid entire records. So, if you want to achieve your requirement you can use last provided solution. 

 

Regards,
Praveenkumar G