We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. React - EJ 2
  4. RemoteSaveAdaptor sample for react

RemoteSaveAdaptor sample for react

Hi

I want to have a grid with client sort , search , filter,...
like offline mode but have CRUD operations beside the offline features.
I searched for that and found out there is another adaptor  named RemoteSaveAdaptor 
In documentations used local data as json property of DataManager
but how to retrieve data from server ?
Would you please do me a favor and provide a sample ?
another question :
why data format of the CRUD request always is like 
{key: "de0edd95-bd52-4900-2a0f-08d6b7f0611f", keyColumn: "Id", action: "remove"} at server?
or 
  1. keyColumn: "Id"

7 Replies
DR Dhivya Rajendran Syncfusion Team April 14, 2019 07:08 AM UTC

Hi Ali Rahighi, 

Greetings from the Syncfusion support, 

In RemoteSaveAdaptor, EJ2 Grid Actions(Sorting, Filtering and Search) perform in the client-side except the CRUD operation, that has been interact with server-side. Our Grid DataSource must be define the Json property and CRUD operation mapped by the server-side using “insertUrl, updateUrl, removeUrl, batchUrl, crudUrl” properties. 

Please refer the below Help Documentation to know about the RemoteSaveAdaptor in the React platform. 


Please get back to us, if you need further assistance. 

Regards, 
R.Dhivya 


AR Ali Rahighi April 14, 2019 09:27 AM UTC

Thank you Dhivya 
But I expressed 2 problems and respectively none of them was answered.
first was how to provide the reading data(json) from server (not from local)
second one was the format of json the server side would expect for.
for me for example for update operation the json format I receive is :

{
     key : "id of the object",
     value : {
                    the object that is coming to be updated
                  }
}

but in sample you mentioned the controller is directly receiving the value (which is object) :
Is it possible to change the sending data format and to be like the sample code?
 public ActionResult Update(OrdersDetails value)
    {
        ...
        return Json(value);
    }

HJ Hariharan J V Syncfusion Team April 16, 2019 03:28 PM UTC

Hi Ali Rahighi, 

Query #1: but how to retrieve data from server ? 

You can collect the data’s from the server through the ajax request. After that in the ajax success event, you can provide the ajax result to the Grid dataSource through the remoteSaveAdaptor. Please refer the following code snippet, 

public render() { 
        return (<div className='control-section'> 
            <GridComponent id="Grid"> 
                <ColumnsDirective> 
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective> 
                    <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective> 
                    <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' /> 
                    <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective> 
                </ColumnsDirective> 
            </GridComponent> 
        </div>) 
    } 
 
    ajax = new Ajax({ 
        url: "/Home/DataSource", 
        type: "POST" 
    }).send().then((data: any) => { 
        var grid = (document.getElementById("Grid") as any).ej2_instances[0]; // Grid instance 
        grid.dataSource = new DataManager({// provided the dataSource to the Grid through the remoteSaveAdaptor 
            json: JSON.parse(data), 
            adaptor: new RemoteSaveAdaptor() 
        }); 
    }) 

We have prepared the sample with this code and you can find that sample in the below link, 


Query #2: why data format of the CRUD request always is like 

From your query we found that you need to send only the edited values to server. But By default, Grid will send the edited values to server by the default format. If you need to change this format, then you need to customize this format in client side. So please provide the your exact requirement (i.e why you need to send only the edited values to server?) to us. This will help us to provide the solution as early as possible. 

Regards, 
Hariharan 


AR Ali Rahighi April 27, 2019 09:06 AM UTC

Thanks for your attention

HJ Hariharan J V Syncfusion Team April 29, 2019 11:44 AM UTC

Hi Ali Rahighi, 
 
Thanks for your update, we will wait to hear from you. 
 
Regards,
Hariharan 


AR Ali Rahighi replied to Hariharan J V July 10, 2019 07:35 AM UTC

Hi Ali Rahighi, 

Query #1: but how to retrieve data from server ? 

You can collect the data’s from the server through the ajax request. After that in the ajax success event, you can provide the ajax result to the Grid dataSource through the remoteSaveAdaptor. Please refer the following code snippet, 

public render() { 
        return (<div className='control-section'> 
            <GridComponent id="Grid"> 
                <ColumnsDirective> 
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective> 
                    <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective> 
                    <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' /> 
                    <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective> 
                </ColumnsDirective> 
            </GridComponent> 
        </div>) 
    } 
 
    ajax = new Ajax({ 
        url: "/Home/DataSource", 
        type: "POST" 
    }).send().then((data: any) => { 
        var grid = (document.getElementById("Grid") as any).ej2_instances[0]; // Grid instance 
        grid.dataSource = new DataManager({// provided the dataSource to the Grid through the remoteSaveAdaptor 
            json: JSON.parse(data), 
            adaptor: new RemoteSaveAdaptor() 
        }); 
    }) 

We have prepared the sample with this code and you can find that sample in the below link, 


Query #2: why data format of the CRUD request always is like 

From your query we found that you need to send only the edited values to server. But By default, Grid will send the edited values to server by the default format. If you need to change this format, then you need to customize this format in client side. So please provide the your exact requirement (i.e why you need to send only the edited values to server?) to us. This will help us to provide the solution as early as possible. 

Regards, 
Hariharan 


Hi again
Im back
First I must say that I couldn't open the link of sample project you prepared. the link is expired(although Im getting late here)

Second I had implemented my own method at that time :

componentDidMount() {
this.model.list().then(response => {
console.log('response: ', response);
this.setState({ data: response });
// this.grid.dataSource = response;
this.grid.dataSource =
// this.state.data

new DataManager(
{

adaptor: new RemoteSaveAdaptor(),
updateUrl: this.props.model.EditUrl,
json: this.state.data

});

}
);
}

This method was working until I had updated the package to version 17.1.51.
The problem is the Grid does not show data I've provided in "json" property.
It works when I degrade to my working version(17.1.43)
please help.
Im tired of looking and searching for causes of these things.
Please provide a working sample that meet my needs( with RemoteSaveAdaptor and remote data as spoke in previous posts in this thread)
Syncfusion library is great but when you update the package you should expect some features and some malfunctions.


TS Thavasianand Sankaranarayanan Syncfusion Team July 11, 2019 10:52 AM UTC

Hi Ali Rahighi, 

We have prepared the new react Grid with remoteSaveAdaptor sample to ensure the issue. But unfortunately the reported issue was not reproduced at our end. So, we have attached our sample in the below link for your reference, 


Also, we suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Could you please follow the steps provided in the following documentation or use the below steps to overcome the reported behavior. 

  1. Delete package.lock.json file from your application.
  2. Remove the @syncfusion  package folder from the node_modules.
  3. Use same version for all components(Grid, Dropdown, etc,) in package.json file.
  4. Then install the new packages.


If you have faced any script error or any other issues please share the screenshot or a video demonstration of the issue. This will help us to provide a better solution for your requirement as early as possible. 
 
Regards, 
Thavasianand S. 


Loader.
Up arrow icon