Hi Cheng si,
Thanks for contacting Syncfusion support.
From your query, we understood that you want to fetch data from
your own request and show the result in Grid and perform the CRUD in Grid which
will affect the original database. You can achieve your requirement by using either
our EJ2 DataManager with a suitable Adaptors (UrlAdaptor, WebAPIAdaptor, Odata, and OdataV4Adaptor) to your end point or a “Custom Binding” feature in which you
can fetch the data from the server using your own service and bound to the Grid.
Please refer to the below documentation and demo link for more information.
Remote Data Binding:
https://ej2.syncfusion.com/react/documentation/grid/data-binding/remote-data/
https://ej2.syncfusion.com/react/demos/#/material/grid/remote-data
Custom Bind:
https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#custom-binding
https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding
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: 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.
When typing a value in Menu filter dialog/ opening the Excel
Filter Dialog you should return the result value alone to the Grid otherwise
you should return the data as “{result: […], count: …}” format
to
the Grid.
dataStateChange: https://ej2.syncfusion.com/react/documentation/api/grid/#datastatechange
And ‘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 the save
operation.
dataSourceChanged: https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechanged
Please get back to us if you need further assistance on this.
Regards,
Pavithra S
