RemoteSaveAdaptor sample for react

[Ali Rahighi]

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"
2. value: {Id: "209f3152-8b19-4a58-bdce-08d6b85093c8", Name: "مقدارasdasd", LastModifiedDate: "6 روز پیش",…}?
3. 
   
4. and for your notice my DataManager code is set like this: 
5. new DataManager(

   {

   adaptor: new RemoteSaveAdaptor(),

   updateUrl: EditUrl,

   removeUrl: DeleteUrl,

   json:data

   
   

   
   

   });
6. 
   
7. 
   
8. 
   

[Dhivya Rajendran]

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. 

Help Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/?no-cache=1#remote-save-adaptor 

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

Regards, 

R.Dhivya 

[Ali Rahighi]

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);
    }

[Hariharan J V]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11663104698.zip 

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 

[Ali Rahighi]

Thanks for your attention

[Hariharan J V]

Hi Ali Rahighi, 

 

Thanks for your update, we will wait to hear from you. 

 

Regards,
Hariharan 

[Ali Rahighi]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11663104698.zip 

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.

[Thavasianand Sankaranarayanan]

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, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/React-remoteSaveAdaptor-1848243643.zip 

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.

Documentation: https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/ 

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.