How to stop the spinner and make changes to the grid table right away?

Question

All crud operations are running successfully, just the spinner does not stop loading and new data is shown on refresh, i can handle it my own way but i want to know if you have a built in solution for this

import React from "react";
import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Page,
  Selection,
  Inject,
  Edit,
  Toolbar,
  Sort,
  Filter,
} from "@syncfusion/ej2-react-grids";

import { client } from "../client";

import { useEffect } from "react";
import { useState } from "react";
import { customersData, customersGrid } from "../data/dummy";
import { Header } from "../components";

const Customers = () => {
  const [data, setData] = useState({});
  // const [check, setCheck] = useState(false);

  useEffect(() => {
    client.fetch(`*[_type == 'user']`).then((data) => {
      const result = [...data];
      const count = result.length;
      setData({ result, count });
    });
  }, [check]);

  
  function dataSourceChanged(state) {
    if (state.action === "add") {

      const doc = {
        _type: "user",
        ...state.data,
      };
      client.create(doc).then((res) => {
        console.log("added", res);
        // setCheck((prevCheck) => !prevCheck);
      });
    } else if (state.action === "edit") {
      client
        .patch(state.data._id)
        .set(state.data)
        .commit()
        .then((res) => {
          console.log("updated");
          // setCheck((prevCheck) => !prevCheck);
        })
        .catch((err) => {
          console.error("Oh no, the update failed: ", err.message);
        });
    } else if (state.requestType === "delete") {
      client
        .delete(state.data[0]._id)
        .then(() => {
          console.log("deleted");
          // setCheck((prevCheck) => !prevCheck);
        })
        .catch((err) => {
          console.error("Delete failed: ", err.message);
        });
    }
  }

  const selectionsettings = { persistSelection: true };
  const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"];
  const editOptions = {
    allowEditing: true,
    allowAdding: true,
    allowDeleting: true,
  };
  return (
    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
      <Header category="Page" title="Customers" />
      <GridComponent
        dataSource={data}
        enableHover={false}
        allowPaging
        pageSettings={{ pageCount: 5 }}
        selectionSettings={selectionsettings}
        toolbar={toolbarOptions}
        editSettings={editOptions}
        allowSorting
        dataSourceChanged={dataSourceChanged}
      >
        <ColumnsDirective>
          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
          {customersGrid.map((item, index) => (
            <ColumnDirective key={index} {...item} />
          ))}
        </ColumnsDirective>
        <Inject services={[Page, Selection, Toolbar, Edit, Sort, Filter]} />
      </GridComponent>
    </div>
  );
};

export default Customers;

{/* eslint-disable-next-line react/jsx-props-no-spreading */} {customersGrid.map((item, index) => ( ))}

);};export default Customers;

Nithya Sivaprakasam · Answer

Hi Muhammad Izhar,Greetings from Syncfusion support.Currently, we are validating your query and we will update further details tomorrow. Until then, we appreciate your patience.Regards,Nithya S

Muhammad Izhar · Answer

thank you, i'll be waiting for your support.

Nithya Sivaprakasam · Answer

Hi Muhammad Izhar,Thanks for your patience.Query:” How to stop the spinner and make changes to
the grid table right away?”Based on your query, we recommend you to use state.endEdit
method to stop the spinner after makings changes like editing, adding or
deleting. We can save a record by invoking endEdit method while the Grid
is editable. Please check the below code snippet for your reference.

public dataSourceChanged(state:
  DataSourceChangedEventArgs): void {
    if (state.action === 'add') {
     
  this.orderService.addRecord(state).then(() => state.endEdit());
    } else if (state.action === 'edit') {
     
  this.orderService.updateRecord(state).then(() => state.endEdit());
    } else if (state.requestType === 'delete') {
     
  this.orderService.deleteRecord(state).then(() => state.endEdit());
    }
  }

For more information, please check the below documentation.Documentation Link: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#perform-crud-operationshttps://ej2.syncfusion.com/react/documentation/api/grid/edit/#endeditKindly get back to us if you need further assistance.Regards,Nithya Sivaprakasam.

Muhammad Izhar · Answer

hi, thank you for your time!Calling endEdit() solved the spinner problem for edit option only, add and delete still loads forever and my sourcedata is coming from sanity (a headless cms), i want changes to the table when new crud operations is completed, i'm sorry but the documentation is very confusing for me, as i have zero knowledge of typescript, can you assists on this please.import React from "react";import { GridComponent, ColumnsDirective, ColumnDirective, Page, Selection, Inject, Edit, Toolbar, Sort, Filter,} from "@syncfusion/ej2-react-grids";import { client } from "../client";import { useEffect } from "react";import { useState } from "react";import { ordersGrid } from "../data/dummy";import { Header } from "../components";const Customers = () => { const [data, setData] = useState({}); useEffect(() => { client.fetch(`*[_type == 'order']`).then((data) => { const result = [...data]; const count = result.length; setData({ result, count }); }); }, [data]); function dataSourceChanged(state) { if (state.action === "add") { const doc = { _type: "order", ...state.data, }; client .create(doc) .then((res) => { state.endEdit(); console.log("added", res); }) .catch((err) => { console.log(err) }); } else if (state.action === "edit") { client .patch(state.data._id) .set(state.data) .commit() .then((res) => { state.endEdit(); console.log("updated"); }) .catch((err) => { console.log(err) }); } else if (state.requestType === "delete") { client .delete(state.data[0]._id) .then(() => { state.endEdit(); console.log("deleted"); }) .catch((err) => { console.log(err"); }); } } const selectionsettings = { persistSelection: true }; const toolbarOptions = [ "Add", "Edit", "Delete", "Update", "Cancel", "Search", ]; const editOptions = { allowAdding: true, allowEditing: true, allowDeleting: true, }; return (

{/* eslint-disable-next-line react/jsx-props-no-spreading */} {ordersGrid.map((item, index) => ( ))}

);};export default Customers;

Nithya Sivaprakasam · Answer

Hi Muhammad,We are checking on your query and we will update further
details on May 31st,2022.We appreciate your patience until then.Regards,Nithya Sivaprakasam.

Nithya Sivaprakasam · Answer

Hi Muhammad,Sorry for the inconvenience caused. Still, we are checking your query and we will update further details on June 1st,2022.Until then we appreciate your patience.Regards,Nithya Sivaprakasam.

Nithya Sivaprakasam · Answer

Hi Muhammad,Thanks for the patience.Query: Spinner problem for add and delete optionBased on the query, we would like to
inform you about dataStateChange event and the dataSourceChanged event. The dataStateChange
Event triggers when you perform any grid actions like sorting, paging,
filtering and grouping. It re-renders the data again in the grid. Code example:

public dataStateChange(state : DataStateChangeEventArgs) {
      this.orderService.execute(state).then((
  gridData ) => {this.grid.dataSource = gridData} );
    }

The dataSourceChanged event is
triggered when the data is added, deleted and updated. We can perform the CRUD
action by using action details from this event. Then we need to call the endEdit
method to indicate the completion of the save operation.In our previous update, we suggested you
use the endEdit method to stop the edit operation and save the data in
the grid. This would help you to hide the spinner after editing. However, we
want to give clarification on why the endEdit method is not working for adding
or deleting.When we edit the row and called the
endEdit method, it will complete the edit operation and refreshes the
particular row in the grid. But when we add or delete the data the whole grid
gets refreshed. So we should enable the dataStateChange event whenever we add
or delete the data in the grid. It is mandatory to use the dataStateChange
event even for sorting, paging, grouping and filtering.Please refer to the below documentation for reference.Documentation link:https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechangedhttps://ej2.syncfusion.com/react/documentation/api/grid/#datastatechangehttps://ej2.syncfusion.com/react/documentation/api/grid/#endedithttps://ej2.syncfusion.com/react/demos/#/bootstrap5/grid/custom-bindingPlease get back to us if you need further assistance.Regards,Nithya Sivaprakasam.