Format Remote Data

[Ajinkya Kathe]

Hello, I am fetching data from my remote server and the response is in different format example: data: [{}], and the DataManager needs the response as array of tasks

const dataSource = new DataManager({

url: 'https://xyz.com',

adapter: new UrlAdaptor(),

crossDomain: true,

headers: [{'Authorization': `Bearer token`,},],

});

Is there a way to format the response coming from api, I have gone through the custom binding, can you provide me an example of it with react functional component for data manager

[Rajapandiyan Settu]

Hi Ajinkya, 

Thanks for contacting Syncfusion support.

We would like to share the available Data-Binding support in the EJ2 Grid.

• Local data
• Remote data
• Custom binding
• Ajax binding

** Local Data Binding **

If you are using local data in your project, then you can bind array of objects to the Grid. All the Grid actions like Paging, Editing, Sorting, etc., are performed on the client side.

Local data: https://ej2.syncfusion.com/react/documentation/grid/data-binding/local-data/

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/local-binding

** Remote Data Binding **

If you are using  WebAPI service or OData or SQL or any DataTable or List binding in your application, then we suggest you to use the inbuilt adaptor of DataManager to perform the actions on your service.

You can choose the adaptors based on your Database. For each Grid data action like Filtering, Sorting, Paging, Scrolling, etc., we send the corresponding query to the server based on the data adaptors. You can execute the queries with your data and you should return results in the required format to the Grid.

Refer to the below documentation which illustrates available data adaptors in EJ2.

Remote-data: https://ej2.syncfusion.com/react/documentation/grid/data-binding/remote-data/

WebAPI adaptor: https://ej2.syncfusion.com/react/documentation/grid/data-binding/remote-data/#web-api-adaptor

Odata: https://ej2.syncfusion.com/react/documentation/grid/data-binding/remote-data/#odata-v4-adaptor---binding-odata-v4-service

URL Adaptor: https://ej2.syncfusion.com/react/documentation/grid/editing/persisting-data-in-server/#using-url-adaptor

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/remote-data

### URL Adaptor ###

The URL Adaptor is used to perform On-Demand actions in the EJ2 Grid. This is explained in the below documentation. 

  

Doc: https://ej2.syncfusion.com/react/documentation/grid/editing/persisting-data-in-server/#using-url-adaptor

  

When we perform any Grid actions like Paging, Searching, Sorting, Filtering, Exporting, etc., we send corresponding action details to the server. You can get these by using DataManagerRequest class in your server method. 

Here, you can perform the data actions in your SQL Data or List and return the corresponding data in object format with result and count value to the Grid (result property contains the current page records, and count property contains the whole records count).

You can map The CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl, CrudUrl.

Sample: https://stackblitz.com/edit/react-xd4rnc?file=index.js

Screenshot: Response from the server (URL Adaptor)

** Custom Binding **

If you are using any custom service, we suggest you use the custom-binding feature to bind the data to the Grid. 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 sent 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 by 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 load event of Grid. 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.

Custom-binding: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#custom-binding

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding

sample: https://stackblitz.com/edit/react-v64sms?file=index.js

** Ajax Binding **

By using ajax binding, you can get all the data from service and bind the result data (array of objects) to the grid instances. It works as local data. i.e. All the Grid data actions like Paging, Sorting, Filtering, etc., are performed only on the client side.

Binding with ajax: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#binding-with-ajax

Kindly choose the data-binding based on your service. Please let us know if you have any concerns.

Still, if you have any concerns, kindly share the below details to validate this further.

1. Which type of service you are using in your project? (WebAPI service/ OData/ SQL/ Own Custom service)
2. Are you want to perform all the Grid actions like Editing, Searching, Sorting, etc., from the server (custom service) or in the client side?

Regards,

Rajapandiyan S