delete data from spreadsheet and database

[Zami Zami]

I created a crud with syncfusion spreadsheet, but to delete data, it doesn't work yet, the ID of the data I want to delete can't be retrieved, is there a solution?

const handleActionBegin = async (args) => {

    if (args.action === "delete") {

      const rowIndex = args.index;

      const sheet = spreadsheetRef.current.getActiveSheet();

      const row = sheet.rows[rowIndex];

      const id = row?.cells[2]?.value;

      console.log(id)

      if (id) {

        try {

          await deleteRecord(id);

          console.error("Successfully");

          fetchData();

        } catch (error) {

          console.error("Failed to delete record:", error);

        }

      }

    }

  };

[Dinakar Manickam]

Hi Zami Zami,

We have checked your reported query, and we suspect that you require a value while deleting a row in spreadsheet.

Also, based on the code snippet provided in the attached screenshot, we would like to let you know that you are using args.index to get the rowIndex of a row, which is not available in the args of actionBegin event.

To get the row index when deleting a single row, you can use args.eventArgs.startIndex to get the rowIndex of a single row, whereas if you need to get the rowIndex when deleting multiple rows, you need to utilize both args.eventArgs.startIndex and args.eventArgs.endIndex .

For your convenience, we have prepared a local sample and attached it along with the code snippet below for your reference.

Code Snippet:

export default function App() {

  const spreadsheetRef = React.useRef(null);

  const handleActionBegin = async (args) => {

    const eventArgs = args.args.eventArgs;

    if (args.action === "delete" && eventArgs.modelType === "Row" ) {

      const rowStartIndex = eventArgs.startIndex;

      const rowEndIndex = eventArgs.endIndex;

      const sheet = spreadsheetRef.current.getActiveSheet();

      let rows;

      let rowIds = [];

      // To get rowIndex when single row is deleted

      if (rowStartIndex === rowEndIndex) {

        rows = sheet.rows[rowStartIndex];

        rowIds.push(rows?.cells[0]?.value);

      }

      // To get rowIndex when multiple rows are deleted

      else {

        for (let i = rowStartIndex; i <= rowEndIndex; i++) {

          rows = sheet.rows[i];

          rowIds.push(rows?.cells[0]?.value);

        }

      }

      console.log(rowIds);

     

      if (rowIds.length > 0) {

        // You can perform the action based on the rowIds

      //   try {

      //     await deleteRecord(id);

      //     console.error("Successfully");

      //     fetchData();

      //   } catch (error) {

      //     console.error("Failed to delete record:", error);

      //   }

      }

    }

  };

 

  const onCreated = () => {

    spreadsheetRef.current.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');

    spreadsheetRef.current.numberFormat('$#,##0.00', 'F2:F31');

  }

   

  return (

    <div className='control-section spreadsheet-control'>

      <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' ref={spreadsheetRef} created={onCreated} actionBegin={handleActionBegin}>

        <SheetsDirective>

          <SheetDirective name="Car Sales Report">

            <RangesDirective>

              <RangeDirective dataSource={sortingAndFiltering}></RangeDirective>

            </RangesDirective>

            <ColumnsDirective>

              <ColumnDirective width={180}></ColumnDirective>

              <ColumnDirective width={130}></ColumnDirective>

              <ColumnDirective width={130}></ColumnDirective>

              <ColumnDirective width={180}></ColumnDirective>

              <ColumnDirective width={130}></ColumnDirective>

              <ColumnDirective width={120}></ColumnDirective>

            </ColumnsDirective>

          </SheetDirective>

        </SheetsDirective>

      </SpreadsheetComponent>

    </div>

  );

}

Sample Link: Please refer to the attachment below.

In the above sample, we have fetched the values while deleting the rows and logged it to the console for your reference.

For your convenience, we have prepared a video demonstration showcasing the above cases and attached below for your reference.

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-F188532-1278018595

Kindly, check the above details and get back to us for further clarifications.

Attachment: Sample188532_a2628e5a.zip

[Zami Zami]

thank you,, very helped, my problem is solved

[Janakiraman Sakthivel]

Hi Zami Zami,

We are happy to hear that your problem has been resolved. Kindly get back to us if you need any further assistance.

[Zami Zami]

I have another question, what about when I update data where the data is in the middle of the row, I want the data to remain is in the row, in my database I have an order column, is there a way to adjust the order of the rows in the spreadsheet so that when I save data or update it, I fill in my order column values ​​with the spreadsheet row (row = order)?

[Dinakar Manickam]

Hi Zami Zami,

We have checked your reported query, and we suspect that you need the updated data from the spreadsheet at your end.  We suggest that to get the updated data from the spreadsheet, you can use the cellSave  event of our spreadsheet.

The cellSave event triggers when edited cell is saved. In this event you can get the updated cell information with old value and updated value along with the cell address.

Also, the dataSourceChanged event triggers when edit, insert or delete actions are performed in the dataSource range. In this event, we can get the modified row data.

For your convenience, we have prepared the video demonstration and attached below along with the sample.

Video Link: Please refer to the attachment below.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-F188532862257791

Kindly, check the above information and if it still doesn’t meet your requirement, please share the detailed description of your requirement along with a screenshot or video demonstration. Based on that we will provide you with a better solution quickly.

Regards,

Dinakar M

Attachment: Video188532_4e847cea.zip

[Zami Zami]

Perfect!!!!,,,, that's what i looking for, Thank you very much Dinakar Manickam

[Janakiraman Sakthivel]

Hi Zami Zami,

We're glad your problem was resolved. Please get back to us for further assistance in the future.