1. Home
  2. Forum
  3. Angular - EJ 2
  4. Partial update of data

Partial update of data

Hi

I am in the following situation: I have a grid with data that is updated inline once the user selects a certain cell by double-clicking it. Every time the grid data is updated, I need to call some business API to update the data in the server. I am trying to do it using the dataStateChange and dataSourceChanged methods, but they are not firing. I would like to know if it's mandatory to add data | async to dataSource to make it work correctly. 

My goal is to only send the data that has changed, not the whole row.

Thanks in advance.

3 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team June 18, 2021 10:41 AM UTC

Hi Rafael,  
  
Thanks for contacting Syncfusion support.  
  
Query #1: I need to call some business API to update the data in the server. I am trying to do it using the dataStateChange and dataSourceChanged methods, but they are not firing.  
  
Based on your query, you want to use custom-binding feature to perform CRUD action on your business API. To use custom-binding feature in Grid, we need to bind the data in object format with result and count values to the Grid’s dataSource. We would like to share the behavior of custom-binding in EJ2 Grid.    
    
For every grid action(such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.     
    
Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in ngOnInIt. Please return the result like as “{result: […], count: …}” format to Grid.    
   
   
   
‘dataSourceChanged’ event is triggered when performing CRUD action in Grid. You can perform the CRUD action in your service using action details from this event and, you need to call the endEdit method to indicate the completion of save operation.   
   
   
   
public dataSourceChanged(state: DataSourceChangedEventArgs): void {   
// perform add action in your service   
    if (state.action === "add") {   
      this.crudService.addRecord(state).subscribe(   
        () => {},   
Triggered at failure   
        error => console.log(error), // get the error details   
        () => { // triggered at success   
          state.endEdit(); // calling end edit methods closes the edit form and refreshes the grid   
        }   
      );   
    }    
// perform edit action in your service   
else if (state.action === "edit") {   
      this.crudService.updateRecord(state).subscribe(   
        () => {},   
        error => console.log(error),   
        () => {   
          state.endEdit();   
        }   
      );   
    }    
// perform delete action in your service   
else if (state.requestType === "delete") {   
      this.crudService.deleteRecord(state).subscribe(   
        () => {},   
        error => console.log(error),   
        () => {   
          state.endEdit();   
        }   
      );   
    }   
  }   
   
   
We have prepared a sample for your reference. You can get it from the below link.   
   
   
Query #2: My goal is to only send the data that has changed, not the whole row.  
  
In EJ2 Grid, we have the support to edit a row (Inline & Dialog edit) and particular cells (Batch edit) in the Grid. When we save the data, we send the corresponding row data (includes all the fields) to the server. Since this is our current architecture of EJ2 Grid. So, your requirement is not feasible at our end.  
  
Please get back to us if you need further assistance with this.   
  
Regards,  
Rajapandiyan S  


Marked as answer
RV Rafael Valle June 18, 2021 03:35 PM UTC

Hi Rajapandiyan,

At first, thanks for your answer.

About Query 1) I have done it using the example you have provided to me. Thank you for providing it.

About Query 2) I guess that I need to explain a little more: I only need to send the cell values that are modified to the business API, not the whole row. (I don't mind sending the whole row to the server to update the data shown in the grid, I only need to be precise when sending data to the business API). So, please correct me if I am wrong, but I think that it's possible to do it if you take the event.rowData values and compare them with the event.data or event.previousData and get the differences between them when the dataSourceChanged event happens. At last, I will call the business api to update only the needed properties.

About getting the updated values, I have inspected the following properties, but all of them keep the previous values:
- event.data
- event.rowData
-event.previousData
-event.state.action.data
-event.state.action.rowData
-event.state.action.previousData
-event.form.name.value

The only place I find the updated values it's event.row or event.state.action.row (but inside HTML elements). In event.data, the updated property takes the value 'refresh-virtual-cache'. How can I get the updated values once the event has been completed?


Notes: event is of type DataSourceChangedEventArgs (state in yout example) and state.action is 'edit'

Thanks in advance.

Kind regards,
Rafael

SK Sujith Kumar Rajkumar Syncfusion Team June 21, 2021 01:06 PM UTC

Hi Rafael, 
 
Thanks for the update. 
 
Based on the information provided for the query – 2, we would like to inform you that as mentioned in the previous update the Grid will send the entire row data on performing update action since it is the default behavior based on the current architecture. However, you can achieve your requirement of retrieving only the edited data by using a custom solution to compare the previous and updated data which will be returned as rowData and data respectively in the dataSourceChanged event arguments. This is demonstrated in the below image for your reference, 
 
 
 
So with this, you can compare and retrieve the modified data alone using the below code snippet, 
 
// Grid’s dataSourceChanged event handler 
public dataSourceChanged(state: DataSourceChangedEventArgs) { 
    if (state.action === "edit") { 
        // Old data 
        var oldData = state.rowData; 
        // Updated data 
        var newData = state.data; 
        var changes = {}; 
        var i = 0; 
        // Edit fields are retrieved from the data keys 
        var editFields = Object.keys(state.previousData); 
        while (i < editFields.length) { 
            // Old and updated data are compared and if they are modified, the changed data is pushed into a object variable 
            if (oldData[editFields[i]] !== newData[editFields[i]]) { 
                changes[editFields[i]] = newData[editFields[i]] 
            } 
            i++; 
        } 
    } 
} 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon