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

Problem with data handling in Data grid


Is it possible for the data grid component to parse and display local data from a json object datasource, allow the user to update the values using the toolbar, which hence updates the json object data? I want to implement a grid functionality where it displays fetched data from an axios request, allows the user to edit the fields, and then send the edited data to my server and add it into my database. If this is possible to implement, may I know the necessary steps to take to do it? Thank you.

1 Reply

PS Pavithra Subramaniyam Syncfusion Team December 21, 2022 10:23 AM UTC

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:



Custom Bind:



For every grid action(such as FilterPage, 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.


Pavithra S

Live Chat Icon For mobile
Up arrow icon