Posting updates to server when using a Grid in offline mode.

Question

I have been struggling with trying to get this to work. I have tried two different ways (using a DataManager (using a WebApiAdaptor), or rolling my own WebService class to handle everything via Ajax), but run into issues with both approaches. I would prefer to use the DataManager as this appears to cause less issues.

I need the following:

* Offline mode

The user experience is better given what the users will be doing. But I want to be able to support both modes of operation.

* Dynamic column creation

While the React application connects via a RESTful service, this service is just a proxy for a SOAP service running on a remote server. The proxy provides a number of convenience functions that the SOAP service doesn't support, as well as being easier to consume.

Question: When using a Grid in offline mode, how do you:

1) Determine which records have actually been updated?
When in offline mode all changes are made to the local dataset. How do we determine which records have been modified/added/deleted? Do we have to track the changes manually?

2) Submit changes back to the server?
Changes are posted back when the Grid is not in offline mode, so I would expect there to be an easy way to manually trigger the submission. I also didn't see a way to toggle offline mode (although that feels like it would be a hackish way to solve the problem).

If anyone has any suggestions, I am all ears.

Joseph Christ Nithin Issack · Answer

Hi Simon, 

   Greetings from Syncfusion support. 

Query 1: Determine which records have actually been updated? 
When in offline mode all changes are made to the local dataset. How do we determine which records have been modified/added/deleted? Do we have to track the changes manually? 

    Before we proceed to the solution we would like you to share the following details so that we may be able to provide a better solution. 


Which type of editing you are using? Batch editing or Inline editing?

Query 2: Submit changes back to the server? 
Changes are posted back when the Grid is not in offline mode, so I would expect there to be an easy way to manually trigger the submission. I also didn't see a way to toggle offline mode (although that feels like it would be a hackish way to solve the problem).  

     By default if you set offline mode as true, there will be no post back sent to the server side. This is the default behavior. If you want to send request to the server side then you must not set  offline as true. You can use data adaptors or custom binding for updating in the server side. By doing so all the data operations will be done in the serverside only. We also have another adaptor called `Remote Save Adaptor` in which all the data operations except the CRUD will be performed in the client side. Please find the documentation for Remote Save Adaptor below. 
 
Documetation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#remote-save-adaptor 

Please get back to us for further details. 

Regards, 
Joseph I.

Simon Cunningham · Answer

I am using inline at the moment, but was just taking a look at the documentation for Batch Editing (which I hadn't dug into yet). Perhaps Batch Editing is what I am actually looking for.

I was wondering whether I would need to use another adaptor like the RemoteSaveAdaptor to implement the postbacks, as I couldn't find anything in the docs that suggested you could switch modes dynamically, or manually execute postbacks for each changed/added/deleted row. But it felt unnecessary, and made me feel like I was approaching this problem from the wrong angle.

I am going to play with Batch Editing some more and will post an update later.

Thank you for the info

Simon Cunningham · Answer

I do like Batch Mode, but I still prefer the experience of using offline mode, so I am going to look into using both, and then handling the postbacks manually, either via a RemoteSaveAdaptor or just Ajax. I tried creating a class that extends WebApiAdaptor, but the moment I tried using the class the data would never get loaded. No errors, just nothing. I tried implementing a constructor to no avail. Switching back to WebApiAdaptor and things would start working again. Couldn't find much info at all on implementing custom adaptors, and the only example I found only overrode the processResponse() function, so I expected that I would only need to do the same (if I even needed to).

At the end of the day, I want all the benefits of offline mode (client-side filtering, sorting, pagination, etc.) and simply the ability to post changes back when the user chooses to commit them (or after a configurable number of changes, be they add, updates or deletes). Because the SOAP service doesn't implement batch updates in a useful way (and I have no control over it), I really want to post each update back individually and handle the failures as needed on the client. While I could do this in the wrapper service, I would rather not.

I will eventually want to support online mode, but that will come later. It is a shame that you can't just switch the DataManager from offline to online mode dynamically when you want to post changes back to the server.

Sujith Kumar Rajkumar · Answer

Hi Simon, 
 
Based on the provided information we could understand that you wish to use offline mode so that the Grid actions are performed in the client side itself and you need to send the CRUD changes back to your server with this. As mentioned in our previous update the RemoteSaveAdaptor can be used if your requirement is to have client side actions for Grid and to handle only CRUD action changes in your server side. Since you need all the actions including CRUD to be performed in the client side itself, we suggest you to use offline mode and use ajax calls to update the CRUD changes to your server. This is explained for Normal/Dialog and Batch edit modes below, 
 
Normal/Dialog Edit: 
 
In Normal/Dialog edit mode when add/edit save or delete action is getting performed, the Grid’s actionBegin event will be triggered before the action is executed where the changes will be returned as event arguments. So from here you can make your ajax call with the CRUD changes and update it in your server data. 
 
This is demonstrated in the below code snippet for your reference, 
 





// Grid’s actionBegin event handler 
actionBegin(args) { 
    if (args.requestType == "save" && (e.action == "edit" || e.action == "add")) { 
         // Triggers for add/edit save action 
        // Updated data 
        var editedData = args.data; 
        // Here you can send the changes to your server for updating 
        var ajax = new Ajax({ 
            url: https://ej2services.syncfusion.com/production/web-services/api/Orders, 
            type: "GET", 
            contentType: "application/json; charset=utf-8", 
            data: JSON.stringify([editedData]) 
        }); 
        ajax.onSuccess = data => { 
            alert('Request success'); 
        } 
        ajax.send(); 
    } 
    if (args.requestType == "delete") { 
         // Triggers for delete action 
         var deletedData = e.data; 
         // Here you can send the changes to your server for updating 
         var ajax = new Ajax({ 
            url: https://ej2services.syncfusion.com/production/web-services/api/Orders, 
            type: "GET", 
            contentType: "application/json; charset=utf-8", 
            data: JSON.stringify([deletedData]) 
         }); 
         ajax.onSuccess = data => { 
            alert('Request success'); 
         } 
         ajax.send(); 
   } 
}  
 
API: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin 
 
Batch Edit: 
 
For batch edit mode, you can use the beforeBatchSave event which will be triggered before saving all the batch changes where the changes will be returned as event arguments. So from here you can make your ajax call with the CRUD changes and update it in your server data. 
 
This is demonstrated in the below code snippet for your reference, 
 





// Grid’s beforeBatchSave event handler 
beforeBatchSave(args) { 
    // Batch changes 
    var changes = args.batchChanges 
    // Here you can send the changes to your server for updating 
    var ajax = new Ajax({ 
        url: https://ej2services.syncfusion.com/production/web-services/api/Orders, 
        type: "GET", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify([changes]) 
    }); 
    ajax.onSuccess = data => { 
        alert('Request success'); 
    } 
    ajax.send(); 
}  
 
API: https://ej2.syncfusion.com/react/documentation/api/grid/#beforebatchsave 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R