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

Grid edit using custom binding keeps loading


When combining your two examples of binding data and edit using command column, the save after edit keeps loading and freezes the grid :

Can you please assist me on this?

Thank you

3 Replies 1 reply marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team October 26, 2022 12:29 PM

Hi Bouchra,

Thanks for contacting Syncfusion support.

Before proceeding to solution, We would like to share the behavior of custom data-binding in EJ2 Grid.

For every grid actions(such as FilterPage, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send 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. So, you need to call your 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 renderComplete. 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

On inspecting the we suspect that you have not used dataSourceChanged event for the CRUD operations and you mentioned that issue as “cannot add data to the Grid”. When adding a data to the Grid, dataSourceChanged event will be triggered. In this event, we must to handle the actions like add, edit, delete, cancel and save to get the required details from the dataSourceChanged event based on CRUD operations. Then, you can handle the operations on your services. Once this operation completed, then we should call the endEdit method on this event. This event will close the edit form in the grid and render the Grid with the updated value. If you implement the above suggested flow in your code, you can perform the CRUD operations with custom binding.

If you still face the issue, kindly share the below details so that we can proceed further.

  • Please share a simple sample where you are facing the issue.
  • Please share the screenshot or video demo of the issue you are facing.
  • Please share the Syncfusion package version you are using.


Joseph I.

Marked as answer

BE Bouchra Essaghir October 31, 2022 09:16 AM

Thank you, it's working

SG Suganya Gopinath Syncfusion Team November 1, 2022 03:48 AM

Hi Bouchra,

We are glad that the provided demo worked to solve the issue. 


Suganya Gopinath.

Live Chat Icon For mobile
Up arrow icon