Data management and sending with datagrid

[Cheng si]

Hello,

Ive been meaning to implement a datagrid with the functionality to use a fetched json object as a datasource, allowing the user to edit and update the table  with the toolbar and the json object at the same time, and inserting the updated data into mysql database upon saving the table. Is it possible to implement this functionality? And if so, how would i go about doing it, such as using dataManager? Thank you 

[Rajapandiyan Settu]

Hi Cheng, 

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 Syncfusion inbuilt adaptor of DataManager to perform the action 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 actions 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.

KB: https://www.syncfusion.com/kb/13252/how-to-bind-sql-server-data-in-react-datagrid-using-sqlclient-data-provider

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 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. Are you using Asp Net Core/ Mvc framework for the backend?
2. How could you retrieve the SQL data in the client side? Share the code details.

Regards,

Rajapandiyan S