Documentation for RemoteSaveAdaptor

Question

HiI can't find documentation for RemoteSaveAdaptor for EJS2,I want that all paging, sorting, filter, etc are handled by the client and only CRUD operation goest to server.I use the next cfg but the call to get records is made using: GET http://localhost:52368/pages/catalogo/undefined (the url of the page + undefined)var url = "http://localhost:5000/api/Persona";var data = new ej.data.DataManager({
        url    : url,
        crudUrl: url,        
        adaptor: new ej.data.RemoteSaveAdaptor(),
        offline: true     });

Dhivya Rajendran · Answer

Hi Marco, 
 
Thanks for contacting Syncfusion support, 
  
We have validated your requirement, We have faced issue in binding data using RemoteSaveAdaptor , we will validate and update more information on March 16,2018. 
 
Regards, 
R.Dhivya

Dhivya Rajendran · Answer

Hi Marco, Thanks for your patience, We have analyzed your requirement and we have prepared a sample with RemoteSaveAdaptor in Grid. Kindly please refer the below sample and code snippet for more information,

@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Json(ViewBag.datasource).UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); }).Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); . . . . }).AllowPaging().AllowSorting().AllowFiltering().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List() {"Edit", "Update", "Cancel" }).Render()

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/remotesaveadaptor_grid-2053850443 We have faced issue with “Insert and delete operations are not working in RemoteSaveAdaptor” is a defect and we have logged a defect report. The fix for this issue is estimated to be available in our upcoming release. Regards,R.Dhivya

Marc · Answer

ok, but I'm using pure JavaScript ES5 and I'm not familiar with the syntax of the example.

May you include the example in JS ES5, please?

In the other hand, is there any date for the next release? And, while it is resolved do you recommend use EJ 1?

Thanks

Dhivya Rajendran · Answer

Hi Marco, 
We have analyzed your query and modified the sample as per your requirement, kindly please refer the below code snippet and sample for more information, 




   var dataSource = @Html.Raw(Json.Encode(ViewBag.DataSource)); 
   var data = new ej.data.DataManager({ 
        json: dataSource, 
        updateUrl:"Update", 
        adaptor: new ej.data.RemoteSaveAdaptor() 
    }); 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        editSettings: { allowEditing: true, mode: 'Normal' }, 
        toolbar: [ 'Edit', 'Update', 'Cancel'], 
         . . . . . . 
        columns: [ 
         . . . . . . 
        ], 
    }); 
    grid.appendTo('#Grid'); 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/remotesaveadaptor-jssample1926270448  
Fix for the issue  “Insert and delete are not refreshing the grid data locally when using RemoteSaveAdaptor “ will be available on end of March. 
Regards,R.Dhivya

Darren · Answer

Could you clarify the type and format of the JSON parameter please. My JS code below works if pass my JSON string to the Grid directly (uncomment datasource: d.detectedDevices) but does not work when using the DataManager tmpdataSource

      function getStat() { 
        // fetch('http://192.168.1.247/status?n=' + Math.random(), 'GET', getStatHandler, 5); 
        var tmpJSONstring = "{\"detectedDevices\":[{\"index\":0,\"address\":\"66:52:50:8b:0d:63\",\"UUID\":\"\",\"name\":\"\",\"lastseen\":4,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"},{\"index\":1,\"address\":\"31:31:b3:b2:32:6e\",\"UUID\":\"\",\"name\":\"\",\"lastseen\":4,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"},{\"index\":2,\"address\":\"28:e3:78:c2:ee:fb\",\"UUID\":\"\",\"name\":\"\",\"lastseen\":4,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"},{\"index\":3,\"address\":\"c0:28:8d:34:f2:34\",\"UUID\":\"0000fe61-0000-1000-8000-00805f9b34fb\",\"name\":\"\",\"lastseen\":4,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"},{\"index\":4,\"address\":\"c0:97:27:21:aa:ad\",\"UUID\":\"\",\"name\":\"\",\"lastseen\":4,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"},{\"index\":5,\"address\":\"64:1c:ae:03:3d:a6\",\"UUID\":\"\",\"name\":\"\",\"lastseen\":4,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"},{\"index\":6,\"address\":\"74:a5:be:56:b9:af\",\"UUID\":\"\",\"name\":\"\",\"lastseen\":22,\"tracked\":false,\"alias\":\"\",\"description\":\"\",\"status\":\"PRESENT\"}]}";
        getStatHandler(200, tmpJSONstring);
      }
      function getStatHandler(s, data) {
        if (s == 200) {
          if (typeof data === 'string') 
          { 
            d = JSON.parse(data); 
          }
            s10.innerText = JSON.stringify(d.detectedDevices);
            ej.grids.Grid.Inject(ej.grids.Resize);
            ej.grids.Grid.Inject(ej.grids.Edit);
            var tmpdataSource = new ej.data.DataManager({
                json: data.detectedDevices,
                adaptor: new ej.data.RemoteSaveAdaptor(),
                crudUrl: "/statusCRUD",
            });

            var grid = new ej.grids.Grid({
                //dataSource: d.detectedDevices,
                dataSource: tmpdataSource,
                toolbar: ['Edit', 'Delete', 'Update', 'Cancel'],
                editSettings: { allowEditing: true, allowAdding: false, allowDeleting: true, mode: 'Dialog' },
                columns: [
                    { field: 'index', headerText: 'Index', textAlign: 'Center', width: 120, type: 'number', isPrimaryKey: true },
                    { field: 'address', width: 140, headerText: 'Address', type: 'string', allowEditing: false },
                    { field: 'UUID', headerText: 'UUID', textAlign: 'Left', width: 120, type: 'string', allowEditing: false },
                    { field: 'name', headerText: 'Name', width: 140, type: 'string', allowEditing: false },
                    { field: 'lastseen', headerText: 'Last Seen', textAlign: 'Center', width: 140, type: 'number', allowEditing: false },
                    { field: 'tracked', headerText: 'Tracked', width: 100, displayAsCheckBox: true, textAlign: 'Center', editType: "booleanedit", },
                    { field: 'alias', headerText: 'Alias', width: 140, type: 'string' },
                    { field: 'description', headerText: 'Desc', width: 140, type: 'string' },
                    { field: 'status', headerText: 'Status', width: 140, textAlign: 'Center', type: 'string', allowEditing: false }
                ],
                dataBound: function () {
                    grid.autoFitColumns(['index', 'address', 'UUID', 'name', 'lastseen', 'tracked', 'alias', 'description', 'status'])
                },
                actionComplete: actionHandler
            });

            grid.appendTo('#Grid');

            function actionHandler(args)
            {
                if (args.requestType === 'save') {
                    grid.autoFitColumns(['alias', 'description'])
                }
            }

        }
      }

Mohammed Farook J · Answer

Hi Darren, 
 
We have validated the provided code example . If you want to bind the data from the custom url ,  We have suggested to use ‘ajax binding’. Please find the documentation for your reference. 
 
https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/?no-cache=1#binding-with-ajax  
 
Regards, 
J Mohammed Farook

Darren · Answer

Hi,thank you for the update. I have looked at the Ajax example but in your text is says "If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions."I need to be able to call update & delete actions on my webserver when the user edits in the grid.Rgds, Darren.

Balaji Sekar · Answer

Hi Darren,  
 
We have validated your requirement and we have suggest to use ‘Custom-binding feature. 
 

If you want to bind the data only from your own, please refer the following document for your reference.
 
Document : https://ej2.syncfusion.com/documentation/grid/data-binding/?no-cache=1#binding-with-ajax 
 

If you want to on-demand-loading data binding concept, we can suggest to you use ‘dataStateChange’ event.  You can track Grid action changes through ‘dataStateChange’ event. Please find the code example and documentation for your reference.
 
let grid: Grid = new Grid({ 
  // need to bind empty array at initial code render 
  dataSource: [], 
  allowPaging: true, 
  dataBound: dataBound, 
  allowSorting: true, 
  allowFiltering: true, 
  dataStateChange: dataStateChange, 
  dataSourceChanged : dataSourceChanged , 
 
  . . . 
}); 
grid.appendTo("#Grid"); 
 
function getData(gridquery) { 
  let gquery = gridquery; 
  // you can perform your query here. 
  const ajax = new Ajax( 
    "https://ej2services.syncfusion.com/production/web-services/api/Orders", 
    "GET" 
  ); 
  ajax.send(); 
  ajax.onSuccess = (data: any) => { 
    if (grid.element !== undefined) { 
                  // need to bind the Grid dataSource as  result and count format .i.e., {result: data, count : total count}  . In count need to pass whole dataSource count and result binding only current view record (12 based on your pageSize) 
      grid.dataSource = {result: JSON.parse(data).slice(gquery.skip, gquery.take * grid.pageSettings.currentPage), count : JSON.parse(data).length}; 
    } 
  }; 
} 
function dataStateChange(state: DataStateChangeEventArgs) { 
  // get grid queries from the Grid action 
  getData(state); 
} 
 
unction dataSourceChanged  (state: DataStateChangeEventArgs) { 
  // get grid queries from the Grid CRUD action 
  getData(state); 
} 
function dataBound(e) { 
  // need to call dataStateChange event by internally  
  if ( grid.dataSource instanceof Array &&!(grid.dataSource as object[]).length) { 
    const state = { skip: 0, take: 10 }; 
    dataStateChange(state); 
  } 
} 
 
 
At the initial Grid rendering please call your service within the load event of the Grid and please return the result like as “{result: […], count: …}” format to Grid. If you want to perform any Grid actions (like CURD, sorting, filtering, paging, grouping) then we suggest to use Grid dataStateChange and dataSourceChanged events. For grid actions such as paging, grouping, sorting, etc., the dataStateChange event is invoked. You have to query and resolve data using your service in this event based on this event arguments. 
 
The dataSourceChanged event is triggered to update the grid data. So please use this event to call your service while perform the CRUD actions in Grid. You can perform the CRUD operation by using this event and you can get the changed records details in this event arguments. Finally you need to call the Grid endEdit method to indicate the completion of save operation. 
 





ajax.onSuccess = (data: any) => { 
    if (grid.element !== undefined) { 
                  // need to bind the Grid dataSource as  result and count format .i.e., {result: data, count : total count}  . In count need to pass whole dataSource count and result binding only current view record (12 based on your pageSize) 
      grid.dataSource = {result: JSON.parse(data).slice(gquery.skip, gquery.take * grid.pageSettings.currentPage), count : JSON.parse(data).length}; 
       
// if it is CRUD action means you call endEdit method 
     grid.endEdit(); 
    } 
  }; 
  
 
Help Documentations :    
                                                https://ej2.syncfusion.com/angular/documentation/api/grid/#datasourcechanged 
https://ej2.syncfusion.com/angular/documentation/api/grid/dataSourceChangedEventArgs/ 
                                                https://ej2.syncfusion.com/angular/documentation/api/grid/#datastatechange 
https://ej2.syncfusion.com/angular/documentation/api/grid/dataStateChangeEventArgs/  
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar