Active Cell is not being captured.

[Salokya]

Active Cell is not being captured, if I click on some other cell and save the sheet, then only it's getting captured.

[Salokya]

Here is the source code ->

let spreadsheet;

    useEffect(() => {

        fetch('http://localhost:5000/get', {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json',

            },

            body: JSON.stringify({ Name: "Sheet1" }),

        })

            .then((response) => response.json())

            .then((data) => {

                console.log(data);

                spreadsheet.openFromJson({ file: data }); // convert the json data to file and loaded into spreadsheet

            })

    }, [])

const handleOnclick = () => {

// console.log(spreadsheet);

spreadsheet.saveAsJson().then(Json => (fetch('http://localhost:5000/update', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify({ JSONData: JSON.stringify(Json.jsonObject), ContentType: "Xlsx", VersionType: "Xlsx" }), // send the filename, json data, content type, version type from client to server

})

.then((response) => response.json())

.then((data) => {

console.log(data);

spreadsheet.openFromJson({ file: data.JSONData });

})))

}

return (

<div className='spreadsheet'>

<Header title="Spreadsheet" />

<button onClick={handleOnclick}>Save Filebutton>

<SpreadsheetComponent

ref={(scope) => { spreadsheet = scope }}

height="82%"

allowOpen={true}

openUrl='https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open'

allowSave={true}

saveUrl='https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'

>

<SheetsDirective>

<SheetDirective>

<RangesDirective>

<RangeDirective>RangeDirective>

RangesDirective>

SheetDirective>

SheetsDirective>

SpreadsheetComponent>

div >

)

[Salokya]

Here is Screenshot, you can see, rows[0] has value but rows[1] doesn't.

[Salokya]

This is the same issue I am facing but solution provided here is not working -> https://www.syncfusion.com/forums/156783/how-to-get-current-cell-text-from-saveasjson-method

[Salokya]

When I click on other cell, you can see 'World' is captured.

[Salokya]

Even normal save method is not capturing active cell data.

On clicking other cell.

[Sangeetha Priya Murugan]

Hi Salokya,

Based on our behavior, the edited cell value gets updated in the cell model after clicking any cell or pressing the Enter key. And this is our behavior, which is not an issue on our end. If you need the edited cell value after loading the saved JSON, you need to call the endEdit method before saving the JSON data. For your reference, we have modified the sample based on our suggestion by using the endEdit method. Please find the link below.

Sample Link: https://stackblitz.com/edit/react-gmavkj-jcugsp?file=index.js,package.json

UG Link: https://ej2.syncfusion.com/react/documentation/spreadsheet/editing#save-cell

[Salokya]

Thank You so much!

[Salokya]

One last thing, can I use Datamanager for binding remote data and performing CRUD operations in form of JSON?

[Sangeetha Priya Murugan]

Hi Salokya,

Yes, you can update the data to spreadsheet using the data manager. For more details regarding remote data binding, please refer to the below links.

Demo Link: https://ej2.syncfusion.com/react/demos/#/bootstrap5/spreadsheet/remote-data-binding

UG Link: https://ej2.syncfusion.com/react/documentation/spreadsheet/data-binding#remote-data

For CRUD operation, dataSourceChanged event handler will be triggered when editing, inserting and deleting a row is made on the datasource range. It is triggered with parameter named action which indicates edit, add and delete for the respective action. By using this event you can do your customization in your end.

 

public dataSourceChanged (args): void {

    //args.data returns the modified data in spreadsheet

    switch (args.action) {

      case 'edit':

        console.log('Edited Data: ' + JSON.stringify(args.data));

        //Do your customization for edit action

        break;

      case 'add':

        console.log('Added Data: ' + JSON.stringify(args.data));

        // Do your customization for insert action

        break;

      case 'delete':

        console.log('Deleted Data: ' + JSON.stringify(args.data));

        // Do your customization edit action

        break;

    }

  }