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

Spinner and dataSourceChanged


I am trying to use the dataSourceChanged event to save the data to the database. So far, I have been able to have the event fired by using the count and result object that I pass to the datasource. However, the grid spinner does not go away.

I tried the following :

  const dataChanged = (state) => {




  return (

    <div className="main">


        <div className="control-pane">

          <div className="control-section">


              ref={(Grid) => (gridRef = Grid)}


                result: data,

                count: data != null ? data.length : 0,







              <Inject services={[Page, CommandColumn, Edit]} />







I wonder what I am doing wrong…

Thank you!


1 Reply

RS Rajapandiyan Settu Syncfusion Team November 8, 2022 01:06 PM UTC

Hi Sylvain, 

Thanks for contacting Syncfusion support.

By analyzing your code example, we found that you did not bind the dataStateChange event to the Grid component. This is the cause of reported behavior. We suggest you to bind the dataStateChange event to resolve this.

dataStateChange: https://ej2.syncfusion.com/react/documentation/api/grid/#datastatechange
dataSourceChanged: https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechanged

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

For every grid action (such as FilterPage, Refresh, 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 in result and count object format. 

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.

Kindly refer to the below documentation for more information.




Rajapandiyan S

Live Chat Icon For mobile
Up arrow icon