Hello,
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
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 Filter, Page, 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.
Regards,
Joseph I.
Thank you, it's working
Hi Bouchra,
We are glad that the provided demo worked to solve the issue.
Regards,
Suganya Gopinath.