Spinner and dataSourceChanged

[Sylvain Menard]

Hi!

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) => {

    state.endEdit();

    state.cancelEdit();

  };

  return (

    <div className="main">

      <React.Fragment>

        <div className="control-pane">

          <div className="control-section">

            <GridComponent

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

              dataSource={{

                result: data,

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

              }}

              dataSourceChanged={dataChanged}

              allowPaging={true}

              editSettings={editSettings}

              pageSettings={pageSettings}

            >

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

            </GridComponent>

          </div>

        </div>

      </React.Fragment>

    </div>

  );

I wonder what I am doing wrong…

Thank you!

Sylvain

[Rajapandiyan Settu]

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 Filter, Page, 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.

Custom-binding:
https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#custom-binding
https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#handling-grid-actions
https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#perform-crud-operations

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding

Regards, 

Rajapandiyan S